Formulir Reaktif di Angular

Dalam pelajaran ini, Anda akan mempelajari formulir reaktif yang menangani skenario formulir kompleks dalam aplikasi Angular.

Apa Itu Formulir Reaktif?

Formulir reaktif menggunakan pendekatan terprogram untuk membuat dan mengelola formulir, sehingga menawarkan fleksibilitas dan kemampuan validasi yang lebih besar.

Mengimpor ReactiveFormsModule

Untuk menggunakan formulir reaktif, impor ReactiveFormsModule ke modul Anda:

import { ReactiveFormsModule } from '@angular/forms';

Membuat FormGroup

Tentukan grup formulir di class komponen Anda:

this.myForm = new FormGroup({
  name: new FormControl('')
});

Mengikat Formulir ke Templat

Gunakan direktif formGroup di templat untuk menghubungkan grup formulir Anda:

<form [formGroup]="myForm">
  <input formControlName="name">
</form>

Validasi Formulir

Validator dapat ditambahkan dengan mudah ke formulir reaktif untuk memastikan kebenaran input:

name: new FormControl('', Validators.required)

Menangani Pengiriman Formulir

Tangani pengiriman formulir dengan berlangganan ke peristiwa pengiriman di class komponen Anda:

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

Menggunakan FormBuilder

Layanan FormBuilder menyederhanakan pembuatan formulir:

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

Ringkasan

Sekarang Anda tahu cara membuat formulir reaktif, menangani validasi, dan mengelola status formulir secara efektif. Kerja bagus!