Angular tilbyr to tilnærminger til forms. Template-driven forms er enkle og definert i HTML; reactive forms er definert i TypeScript og tilbyr mer kontroll — bedre for komplekse, dynamiske eller sterkt validerte forms.
// just import FormsModule; minimal TS
Submit
Formstrukturen og validering lever i templaten via ngModel-direktiver. Enkelt å sette opp, men formmodellen er implisitt og vanskeligere å teste/manipulere programmatisk.
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>
Formen er et eksplisitt objekt (FormGroup/FormControl) du bygger i TS. Dette gjør det observerbart, testbart og enkelt å manipulere (legge til/fjerne felt, reagere på endringer 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
Å velge riktig formtilnærming betyr noe for vedlikeholdbarhet: template-driven for raske, enkle forms; reactive for alt komplekst — multi-steg-veivisere, dynamiske feltsett, tverrfeltvalidering eller forms som trenger enhetstester.
Reactive forms' eksplisitte, observerbare modell foretrekkes generelt i alvorlige applikasjoner fordi den er mer kraftfull, testbar og skalerbar, selv om det krever mer initialt kode.
Et bibliotek av IT-intervjuspørsmål med detaljerte svar — fra Junior til Senior.
Doner