Angular Forms – 2

Modul ini akan membahas pendekatan Template Driven.

Untuk keperluan tutorial ini, Anda dapat download file disini https://drive.google.com/file/d/1W38xVygivms7QeLTgxQ6jlRkO5Ttdmin/view?usp=sharing

Project akan berisi app component saja yang berisi form sederhana. Jika Anda buka file app.component.html, dapat dilihat element <form> tidak berisi attribute action dan method, karena hal ini akan dihandling melalui Angular.

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
      <form>
        <div id="user-data">
          <div class="form-group">
            <label for="username">Username</label>
            <input type="text" id="username" class="form-control">
          </div>
          <button class="btn btn-default" type="button">Suggest an Username</button>
          <div class="form-group">
            <label for="email">Mail</label>
            <input type="email" id="email" class="form-control">
          </div>
        </div>
        <div class="form-group">
          <label for="secret">Secret Questions</label>
          <select id="secret" class="form-control">
            <option value="pet">Your first Pet?</option>
            <option value="teacher">Your first teacher?</option>
          </select>
        </div>
        <button class="btn btn-primary" type="submit">Submit</button>
      </form>
    </div>
  </div>
</div>

Hal yang harus dilakukan adalah, menambahkan library FormsModule pada app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
//pastikan import FormsModule 
import { FormsModule } from '@angular/forms';


import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule, //pastikan import FormsModule 
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Kita perlu mergistrasikan element form yang akan digunakan, agar Angular dapat membuat JavaScript object yang berhubungan dengan form terserbut secara otomatis.

Untuk registrasi, gunakan directive ngModel pada element form yang akan digunakan dan menambahkan form attribute name (jika belum ada).

<input type="text" id="username" class="form-control" ngModel name="username">

Ada dua pendekatan cara Angular mengakses Form, dengan passing local reference melalui function, atau membaca local reference dengan @ViewChild.

Pendekata Pasing Local Reference Melalui Function

Pertama kita tambahkan directive ngSubmit pada tag <form>. Perlu ditambahkan method untuk handling ngSubmit pada file app.component.ts.

Agar JavaScript object form dapat diakses, perlu tambahkan local reference dari form, yang akan dipassing kedalam method yang akan dipanggil ketika form disubmit.

<form (ngSubmit)="onSubmit(f)" #f="ngForm">

Berikut hasil akhir dari app.component.html.

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
      <form>
        <div id="user-data">
          <div class="form-group">
            <label for="username">Username</label>
            <input type="text" id="username" class="form-control" ngModel name="username">
          </div>
          <button class="btn btn-default" type="button">Suggest an Username</button>
          <div class="form-group">
            <label for="email">Mail</label>
            <input type="email" id="email" class="form-control" ngModel name="email">
          </div>
        </div>
        <div class="form-group">
          <label for="secret">Secret Questions</label>
          <select id="secret" class="form-control" ngModel name="secret">
            <option value="pet">Your first Pet?</option>
            <option value="teacher">Your first teacher?</option>
          </select>
        </div>
        <button class="btn btn-primary" type="submit">Submit</button>
      </form>
    </div>
  </div>
</div>

pada file app.component.ts, local reference yang dipasing akan dibaca oleh function onSubmit() (nama fungsi bebas).

import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  suggestUserName() {
    const suggestedName = 'Superuser';
  }

  onSubmit(form: NgForm){
    console.log(form);
  }
}

Pendekatan @ViewChild

Pada file app.component.html, local reference tidak perlu dipasing sebagai argument.

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
      <form (ngSubmit)="onSubmit()" #f="ngForm">
        <div id="user-data">
          <div class="form-group">
            <label for="username">Username</label>
            <input type="text" id="username" class="form-control" ngModel name="username">
          </div>
          <button class="btn btn-default" type="button">Suggest an Username</button>
          <div class="form-group">
            <label for="email">Mail</label>
            <input type="email" id="email" class="form-control" ngModel name="email">
          </div>
        </div>
        <div class="form-group">
          <label for="secret">Secret Questions</label>
          <select id="secret" class="form-control" ngModel name="secret">
            <option value="pet">Your first Pet?</option>
            <option value="teacher">Your first teacher?</option>
          </select>
        </div>
        <button class="btn btn-primary" type="submit">Submit</button>
      </form>
    </div>
  </div>
</div>

Pada app.component.ts, tambahkan code

• import library ViewChild.
• inisialisasi variable untuk mengakses local reference.
• method onSubmit(), tidak memerlukan argument.

//import modul ViewChild
import { Component, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  //akses local reference
  @ViewChild('f') myForm! : NgForm;

  suggestUserName() {
    const suggestedName = 'Superuser';
  }

  // pendekatan pertama
  // onSubmit(form: NgForm){
  //   console.log(form);
  // }

  // pendekatan @ViewChild
  onSubmit(){
    console.log(this.myForm);
  }
}

Jika Anda jalankan, kedua pendekatan diatas akan menampilkan object javascript dari form.

Kedua pendekatan diatas adalah valid, silakan memilih salah satu pendekatan diatas.

Umumnya pendekatan kedua digunakan bila kita ingin mengakse form sebelum form di-submit. Misalnya melakukan validasi input saat user melakukan data input.