เรามาดูตัวอย่างแบบง่ายในการใช้ reactive forms ใน angular กัน โดยตัวอย่างจะใช้ FormBuilder

1. อันดับแรกเราก็ไป import กันก่อน

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

2. ต่อไปก็ create initialize จาก construct

export class MyComponent {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]]
    });
  }
}

3. ต่อไปใน template เราก็ bind จาก group และเซ็ต control form

<form [formGroup]="myForm">
  <label>Name:</label>
  <input formControlName="name" type="text">

  <label>Email:</label>
  <input formControlName="email" type="email">
</form>

4. ลอง log ค่า value กับ status เพื่อดูผล

console.log(this.myForm.value);
console.log(this.myForm.status);

5. ต่อไปการ commit กับ reset ก็แบบนี้

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  ...
  <button type="submit">Submit</button>
</form>

export class MyComponent {
  ...

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