Angular Forms – 6

Pada modul ini kita akan membahas Grouping Form Control. Melakukan grouping cocok digunakan jika form yang Anda miliki besar dan complex. Dengan melakukan grouping kita bisa melakukan validasi lagi pada level group.

Untuk menambahkan grouping, digunakan directive ngModelGroup.

Pada contoh kita akan gunakan grouping untuk input username dan mail.

<div id="user-data" ngModelGroup="userData">

Jika Anda jalankan, dapat dilihat dari javascript object, terdapat group data untuk userData

Untuk menggunakan validasi pada level group, kita definisikan sebagai lokal reference

<div id="user-data" ngModelGroup="userData" #userData="ngModelGroup">

Kemudian tambahkan element paragraph untuk menampilkan message jika data yang diinput pada level group invalid.

<p *ngIf="!userData.valid && userData.touched">User data tidak invalid</p>

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">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>
        <button class="btn btn-primary" type="submit" [disabled]="!f.valid">Submit</button>
      </form>
    </div>
  </div>
</div>

Sesuai ekspektasi, jika input tidak valid pada component dalam group userData, maka message error level group akan tampil.