Angular tarjoaa kaksi lähestymistapaa lomakkeille. Mallipohjaised lomakkeet ovat yksinkertaisia ja määritellään HTML-muodossa; reaktiiviset lomakkeet määritellään TypeScriptissa ja tarjoavat enemmän hallintaa — parempia monimutkaisille, dynaamisille tai laajasti validoiduille lomakkeille.
// 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>
Lomakkeen rakenne ja validointi elävät mallissa ngModel -direktiivien kautta. Helppo asentaa, mutta lomakkeen malli on implisiittinen ja vaikeampi testata/käsitellä ohjelmallisesti.
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>
Lomake on eksplisiittinen objekti (FormGroup/FormControl), jonka rakennat TS-muodossa. Tämä tekee siitä havaittavan, testattavan ja helpon käsitellä (lisää/poista kenttiä, reagoi muutoksiin valueChanges -kautta).
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
Oikean lomakkelähestymistavan valitseminen on tärkeää ylläpidettävyyden kannalta: mallipohjainen nopeille, yksinkertaisille lomakkeille; reaktiivinen kaikkeen monimutkaiseen — monivaiheiset ohjatut toiminnot, dynaamiset kenttäjoukot, kenttien välinen validointi tai lomakkeet, jotka tarvitsevat yksikkötestejä.
Reaktiivisten lomakkeiden eksplisiittinen, havaittava malli on yleensä parempi vakavissa sovelluksissa, koska se on tehokkaampi, testattavampi ja skaalautuvampi, vaikka se vaatiikin aluksi enemmän koodia.