Implementasi Template Driven Form – 1

Seperti yang sudah dipelajari pada Modul Pengenalan Form Template Driven, kita akan terapkan pada componentn shopping edit.

Buka file shopping-edit.component.html, kita akan lakukan modifikasi untuk menerapkan template driven pada form.

Yang akan kita lakukan adalah:

• Menghapus code lama, seperti local reference pada element input dan click listener pada button.
• Menambahkan ngSubmit dan local reference pada form.
• Menambahkan attribute name dan directive ngModel control pada form element.
• Menambahkan validation.

Perhatian, untuk validasi input amount agar lebih besar dari nol, digunakan pattern validator. Pattern validator menggunakan regular expression. Anda bisa mempelajari regular expression pada tutorial Regular Expression menggunakan Python.

<div class="row">
    <div class="col-xs-12">
        <form (ngSubmit)="onAddItem(f)" #f="ngForm">
            <div class="row">
                <div class="col-sm-5 form-group">
                    <label for="name" class="form-label">Name</label>
                    <input type="text" class="form-control" id="name" name="name" ngModel required>
                </div>
                <div class="col-sm-2 form-group">
                    <label for="amount" class="form-label">Amount</label>
                    <input type="number" class="form-control" id="amount" name="amount" ngModel required pattern="^[1-9]+[0-9]*$">
                </div>            
            </div>
            <div class="row mt-2">
                <div class="col-xs-12">
                    <button class="btn btn-success me-1" type="submit" [disabled]="f.invalid">
                        Add
                    </button>
                    <button class="btn btn-danger me-1" type="button">Del</button>
                    <button class="btn btn-primary" type="button">Clear</button>
                </div>
            </div>
        </form>
    </div>
</div>

Kemudian buka file shopping-edit.component.ts, kita lakukan beberapa modifikasi.

• Menghapus ViewChild decorator dan library yang sudah tidak digunakan.
• Mengubah code untuk akses form element value.

//hapus ViewChild dan ElementRef
import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Ingredient } from 'src/app/shared/ingredient.model';
import { ShoppingListService } from '../shopping-list.service';

@Component({
  selector: 'app-shopping-edit',
  templateUrl: './shopping-edit.component.html',
  styleUrls: ['./shopping-edit.component.css']
})
export class ShoppingEditComponent implements OnInit {
  //sudah tidak digunakan, karena menggunakan pendekatan template driven
  // @ViewChild('nameInput', {static:false}) nameInputRef!: ElementRef;
  // @ViewChild('amountInput', {static:false}) amountInputRef!: ElementRef;

  constructor(private shoppingListServ : ShoppingListService) { }

  ngOnInit(): void {
  }

  onAddItem(form : NgForm){
    //sudah tidak digunakan, karena menggunakan pendekatan template driven
    // const _name = this.nameInputRef.nativeElement.value;
    // const _amount = this.amountInputRef.nativeElement.value;
    const value = form.value;

    const newIngredient = new Ingredient(value.name, value.amount);
    this.shoppingListServ.addIngredient(newIngredient);
  }
}

Jika Anda jalankan, sesuai harapan, form sudah menggunakan pendekatan template driven dan sudah menggunakan validasi.