Angular biedt twee benaderingen voor formulieren. Template-driven formulieren zijn eenvoudig en gedefinieerd in de HTML; reactive formulieren zijn gedefinieerd in TypeScript en bieden meer controle — beter voor complexe, dynamische of intensief gevalideerde formulieren.
// just import FormsModule; minimal TS
Submit
De formulierstructuur en validatie bevinden zich in het template via ngModel directieven. Eenvoudig in te stellen, maar het formuliermodel is impliciet en moeilijker te testen/programmatisch te manipuleren.
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>
Het formulier is een expliciet object (FormGroup/FormControl) dat je in TS bouwt. Dit maakt het observable, testbaar en makkelijk te manipuleren (velden toevoegen/verwijderen, reageren op wijzigingen via 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
Het kiezen van de juiste formulierbenadering is belangrijk voor onderhoud: template-driven voor snelle, eenvoudige formulieren; reactive voor alles wat complex is — meerstapswizards, dynamische veldsets, kruisveldvalidatie of formulieren die unittests nodig hebben.
Het expliciete, observable model van reactive forms wordt over het algemeen de voorkeur gegeven in serieuze applicaties omdat het krachtiger, testbaar en schaalbaar is, hoewel het meer inleidende code vereist.