Angular Reactive Forms – 5

Melanjutkan modul sebelumnya, kali ini akan dibahas penggunaan form grouping.

Form Grouping berguna jika form yang dibuat cukup complex. Salah satu keuntungan menggunakan grouping, dapat melakukan validasi berdasarkan grouping.

Skenarionya, kita akan lakukan grouping username dan email, menjadi satu form group, misalnya userData.

Buka file app.component.ts, lalu ubah code dengan menambahkan formGroup untuk control yang dimaksud.

import { Component, OnInit } from '@angular/core';
import { 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')
    });
  }

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

  // path berubah karena menggunakan form group
  // get usrnm() { return this.myForm.get('username'); }
  // get email() { return this.myForm.get('email'); }
  
  //karena menggunakan grouping, kita harus akses control melalui form group
  get usrnm() { return this.myForm.get('userData.username'); }
  get email() { return this.myForm.get('userData.email'); }
}

Kita juga perlu mengubah pada template untuk menyamakan skema struktur form.

Buka file app.component.html, pindahkan element username dan email, dalam container formGroupName.

<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()">
        <!-- form grouping userData -->
        <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>
        <button class="btn btn-primary" type="submit">Submit</button>
      </form>
    </div>
  </div>
</div>

JIka Anda jalankan, tentu tidak ada perubahan dibandingkan dengan modul sebelumnya. Karena pada modul ini kita hanya melakukan restrukturisasi form, dan cara mengaksesnya.