Angular formlar için iki yaklaşım sunar. Şablon tarafından yönlendirilen formlar basit ve HTML'de tanımlanmıştır; reaktif formlar TypeScript'te tanımlanmıştır ve daha fazla kontrol sunar — karmaşık, dinamik veya ağır şekilde doğrulanan formlar için daha iyidir.
// just import FormsModule; minimal TS
<form #f="ngForm" (ngSubmit)="onSubmit(f.value)">
<input name="email" ngModel required email /> <!-- ngModel registers the field -->
<input name="password" ngModel required minlength="8" />
<button [disabled]="f.invalid">Submit</button>
</form>
Form yapısı ve doğrulama ngModel direktifleri aracılığıyla şablonda yer alır. Kurmak basittir, ancak form modeli örtük ve programlı olarak test etmek/manipüle etmek daha zordur.
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, TS'de oluşturduğunuz açık bir object (FormGroup/FormControl) şekildedir. Bu onu gözlemlenebilir, test edilebilir ve manipüle etmesi kolay hale getirir (alanları ekleyin/kaldırın, valueChanges aracılığıyla değişikliklere tepki verin).
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
Doğru form yaklaşımını seçmek bakım için önemlidir: hızlı, basit formlar için şablon tarafından yönlendirilen; karmaşık herhangi bir şey için reaktif — çok aşamalı sihirbazlar, dinamik alan setleri, alanlar arası doğrulama veya birim testlerine ihtiyaç duyan formlar.
Reaktif formların açık, gözlemlenebilir modeli, daha güçlü, test edilebilir ve ölçeklenebilir olduğu için, ciddi uygulamalarda genellikle tercih edilir, ancak daha fazla ön kod gerektirse de.