Angular menawarkan dua pendekatan untuk formulir. Formulir template-driven sederhana dan didefinisikan di HTML; formulir reactive didefinisikan di TypeScript dan menawarkan kontrol lebih — lebih baik untuk formulir yang kompleks, dinamis, atau banyak divalidasi.
// just import FormsModule; minimal TS
Submit
Struktur formulir dan validasi hidup di template melalui direktif ngModel. Sederhana untuk diatur, tetapi model formulir bersifat implisit dan lebih sulit untuk diuji/dimanipulasi secara terprogram.
import { FormBuilder, Validators } from "@angular/forms";
export class SignupComponent {
constructor(private fb: FormBuilder) {}
form = this.fb.group({
email: ["", [Validators.required, Validators.email]],
password: ["", [Validators.required, Validators.minLength(8)]],
});
onSubmit() {
if (this.form.valid) console.log(this.form.value);
}
}
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<input formControlName="email" />
<input formControlName="password" type="password" />
<button [disabled]="form.invalid">Submit</button>
</form>
Formulir adalah objek eksplisit (FormGroup/FormControl) yang Anda bangun di TS. Ini membuatnya dapat diamati, dapat diuji, dan mudah dimanipulasi (tambah/hapus bidang, bereaksi terhadap perubahan melalui valueChanges).
Template-driven Reactive
Where defined HTML (ngModel) TypeScript (FormBuilder)
Form model implicit/async explicit, synchronous object
Validation directives in template validators in code
Dynamic forms hard easy (add/remove controls in code)
Testability harder straightforward (it's just an object)
Best for simple forms complex/dynamic/validated forms
this.form.get("email")!.valueChanges.subscribe(v => ...); // react to changes
this.form.valid; // synchronous validity check
Memilih pendekatan formulir yang tepat penting untuk kemudahan pemeliharaan: template-driven untuk formulir cepat dan sederhana; reactive untuk apa pun yang kompleks — wizard multi-langkah, kumpulan bidang dinamis, validasi lintas bidang, atau formulir yang memerlukan pengujian unit.
Model eksplisit dan dapat diamati dari formulir reactive umumnya lebih disukai dalam aplikasi serius karena lebih kuat, dapat diuji, dan dapat diskalakan, meskipun memerlukan lebih banyak kode awal.