Angular nawarake rong pendekatan kanggo form. Form template-driven simpel lan ditetepake ing HTML; form reactive ditetepake ing TypeScript lan menehi kontrol luwih - becik kanggo form kompleks, dinamis, utawa sing nglumpukake validasi abot.
// just import FormsModule; minimal TS
Submit
Struktur form lan validasi manggon ing template nggunakake direttif ngModel. Gampang kanggo disiyapake, nanging model form iku implisit lan luwih angel kanggo diuji/dimanipulasi kanthi program.
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>
Form iku obyek eksplisit (FormGroup/FormControl) sing dibangun ing TS. Iki ndadekake observable, testable, lan gampang kanggo dimanipulasi (tambah/hilangake field, responsif marang owahan liwat 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
Milih pendekatan form sing bener penting kanggo maintainability: template-driven kanggo form singel lan gampang; reactive kanggo apa-apa kompleks — wizard multi-step, set field dinamis, validasi cross-field, utawa form sing butuh unit test.
Model eksplisit lan observable saka form reactive luwih disenan ing aplikasi serius amarga luwih kuat, testable, lan scalable, sanajan butuh nang-nang lebih banyak kode awal.