Angular Forms – 7

Masih melanjutkan project sebelumnya, kali ini kita akan membahas melakukan manipulasi form. Pada form terdapat button suggest user name, skenarionya adalah, jika user menekan button tersebut, kita akan mengisi value tertentu pada form.

Anda bisa menggunakan pendekatan two-way binding, namun pada tutorial ini akan dibahas pendekatan lain, yaitu menggunakan @ViewChild.

Pertama kita buka file app.component.html, tambahkan event binding pada button tersebut.

<button class="btn btn-default" type="button" (click)="suggestUserName()">Suggest an Username</button>

Ada dua cara untuk melakukan pengisian value kedalam form.

  suggestUserName() {
    const suggestedName = 'Superuser';
    this.myForm.setValue({
      userData:{
        username: suggestedName,
        email: ''
      },
      secret: 'pet',
      secretAnswer: '',
      jeniskelamin: 'male'
    });
  }

Perintah setValue mewajibkan kita mengisi object form secara utuh. Jadi semua field harus didefinisikan. Kita tidak bisa memilih salah satu field saja.

Pendekatan diatas kurang tepat, karena, jika user sudah mengisi form, kemudian menekan button tersebut, maka form akan direset menggunakan nilai diatas.

Pendekatan kedua adalah menggunakan form.patchValue, dimana kita bisa memilih field tertentu saja yang akan diupdate.

    this.myForm.form.patchValue({
      userData:{
        username: suggestedName
      }
    });

Berikut isi lengkap file 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 (ngSubmit)="onSubmit()" #f="ngForm">
        <div id="user-data" ngModelGroup="userData" #userData="ngModelGroup">
          <div class="form-group">
            <label for="username">Username</label>
            <input type="text" id="username" class="form-control" ngModel name="username" required>
          </div>
          <button class="btn btn-default" type="button" (click)="suggestUserName()">Suggest an Username</button>
          <div class="form-group">
            <label for="email">Mail</label>
            <input type="email" id="email" class="form-control" ngModel name="email" required email #vemail="ngModel">
            <span *ngIf="!vemail.valid && vemail.touched">Please input valid email...</span>
          </div>          
        </div>
        <p *ngIf="!userData.valid && userData.touched">User data tidak invalid</p>
        <div class="form-group">
          <label for="secret">Secret Questions</label>
          <select id="secret" class="form-control" [ngModel]="defaultSecret" name="secret">
            <option value="pet">Your first Pet?</option>
            <option value="teacher">Your first teacher?</option>
          </select>
        </div>
        <div class="form-group">
          <textarea name="secretAnswer" rows="3" class="form-control" [(ngModel)]="answerSecret"></textarea>
          <p>Your answer is: {{answerSecret}}</p>
        </div>
        <div class="radio" *ngFor="let jk of jenisKelamin">
          <label><input name="jeniskelamin" type="radio" ngModel [value]="jk">{{jk}}</label>
        </div>
        <button class="btn btn-primary" type="submit" [disabled]="!f.valid">Submit</button>
      </form>
    </div>
  </div>
</div>

File app.component.ts

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 {
  @ViewChild('f') myForm! : NgForm;
  defaultSecret = 'pet';
  answerSecret = '';
  //property untuk radio button
  jenisKelamin = ['Pria', 'Wanita'];

  suggestUserName() {
    const suggestedName = 'Superuser';
    // pendekatan ini akan mereset form yang sudah diisi oleh user
    // this.myForm.setValue({
    //   userData:{
    //     username: suggestedName,
    //     email: ''
    //   },
    //   secret: 'teacher',
    //   secretAnswer: '',
    //   jeniskelamin: 'male'
    // });

    //pendekatan ini memungkinkan kita untuk mengupdate field tertentu saja.
    this.myForm.form.patchValue({
      userData:{
        username: suggestedName
      }
    });
  }

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