Angular Forms – 6

Ada yang kurang dengan project awal pengenalan form, yaitu menggunakan radio button.

Mari kita bahas penggunaan radio button dengan membuka file app.component.ts, lalu tambahkan property jenisKelamin;

jenisKelamin = ['Pria', 'Wanita'];

Kemudian buka file app.component.html, tambahkan radio button dengan cara looping menggunakan ngFor.

<div class="radio" *ngFor="let jk of jenisKelamin">
  <label><input name="jeniskelamin" type="radio" ngModel [value]="jk">{{jk}}</label>
</div>

Jika dijalankan, radio button Jenis Kelamin sudah tampil sesuai ekspektasi.

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>
        <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 pertama
  // onSubmit(form: NgForm){
  //   console.log(form);
  // }
  
  onSubmit(){
    console.log(this.myForm);
  }
}