Angular Reactive Forms – 6

Pada modul ini kita akan belajar menambahkan form control secara dinamis.

Skenarionya adalah user dapat menambahkan informasi hobbies (dapat lebih dari satu hobby).

Untuk itu kita akan gunakan FormArray untuk menyimpan array of form control.

Buka file app.component.ts, lalu tambahkan:

• key-value pada form object untuk menyimpan data hobbies.
• method untuk handling ketika user menekan add hobby button.
• method getter untuk mengembalikan array of control dari hobbies.

import { Component, OnInit } from '@angular/core';
import { FormArray, FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  genders = ['male', 'female'];
  myForm! : FormGroup;

  ngOnInit(){
    this.myForm = new FormGroup({
      //formGroup userData
      'userData' : new FormGroup({
        'username' : new FormControl(null, Validators.required),
        'email' : new FormControl(null, [Validators.required, Validators.email]),  
      }),
      'gender' : new FormControl('male'),
      'hobbies' : new FormArray([])
    });
  }

  onSubmit(){
    console.log(this.myForm);
  }

  get usrnm() { return this.myForm.get('userData.username'); }
  get email() { return this.myForm.get('userData.email'); }

  //method handling add hobby
  onAddHobby(){
    const ctrl = new FormControl(null, Validators.required);
    (<FormArray>this.myForm.get('hobbies')).push(ctrl);
  }

  //getter untuk mengambil array of control dari hobbies
  get hobbies() {return (this.myForm.get('hobbies') as FormArray).controls;}
}

Kemudian buka file app.component.html, disinia ada beberapa point yang ditambahkan

• directive formArrayName digunakan untuk sinkronisasi dengan object FormArray pada file typescript.
• Button untuk menambahkan hobby baru.
• input type, dengan looping untuk menampilkan element input berdasarkan jumlah hobbies yang ditambahkan.

<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 [formGroup]="myForm" (ngSubmit)="onSubmit()">
        <div formGroupName="userData">
          <div class="form-group">
            <label for="username">Username</label>
            <input
              type="text"
              id="username"
              class="form-control"
              formControlName="username">
              <p *ngIf="usrnm.invalid  && usrnm.touched">Please input user name</p>
          </div>
          <div class="form-group">
            <label for="email">email</label>
            <input
              type="text"
              id="email"
              class="form-control"
              formControlName="email">
              <p *ngIf="email.invalid  && email.touched">Please input valid email</p>
          </div>
        </div>
        <div class="radio" *ngFor="let gender of genders">
          <label>
            <input
              type="radio"
              [value]="gender"
              formControlName="gender">{{ gender }}
          </label>
        </div>
        <!-- - tambahkan directive formArray, 
        - button untuk menambahkan hobby 
        - looping untuk menambahkan input -->
        <div formArrayName="hobbies">
          <h4>Add Hobbies</h4>
          <button class="btn btn-dark" type="button" (click)="onAddHobby()">Add Hobby</button>
          <div class="form-group"
           *ngFor="let hobby of hobbies; let i = index;">
            <input type="text" class="form-control" [formControlName]="i">
          </div>
        </div>
        <hr>
        <button class="btn btn-primary" type="submit">Submit</button>
      </form>
    </div>
  </div>
</div>

Sesuai ekspektasi, kita berhasil menambahkan element input secara dinamis, dan menghubungkan dengan object form pada type script serta membaca data dari element yang ditambahkan dinamis tersebut.