Angular Reactive Forms – 2

Melanjutkan dari modul sebelumnya, kita akan mulai membuat form.

Untuk membuat form, digunakan class FormGroup yang akan berisi javascript object, dimana isinya adalah FormControl.

Secara sederhana, struktur untuk membuat form adalah sebagai berikut:

myform = new FormGroup({
  formcontrol1 : new FormControl('default_value'),
})

Buka file app.component.ts, form akan kita buat dalam method onInit. Jadi perlu ditambahkan implements onInit, dan membuat method ngOnInit().

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } 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({
      'username' : new FormControl(null),
      'email' : new FormControl(null),
      'gender' : new FormControl('male')
    });
  }
}

Sampai disini, code diatas sudah membentuk basic form.

Berikutnya adalah menghubungkan form diatas dengan file template, yaitu: app.component.html

Untuk menghubungkan, digunakan property binding directic FormGroup pada element form.

<form [formGroup]="myForm">

Kemudian menghubungkan element form template dengan form control pada typescript. Pada contoh code dibawah menghubungkan input type username.

<input
 type="text"
 id="username"
 class="form-control"
 formControlName="username">

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 [formGroup]="myForm">
        <div class="form-group">
          <label for="username">Username</label>
          <input
            type="text"
            id="username"
            class="form-control"
            formControlName="username">
        </div>
        <div class="form-group">
          <label for="email">email</label>
          <input
            type="text"
            id="email"
            class="form-control"
            formControlName="email">
        </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>

Sampai disini kita sudah berhasil mensinkronisasi antara formcontrol dengan element html.