Az Angular két módszert kínál az űrlapokhoz. A template-driven űrlapok egyszerűek és a HTML-ben vannak definiálva; a reactive űrlapok TypeScript-ben vannak definiálva és több kontrollot nyújtanak — komplexebb, dinamikus vagy erősen validált űrlapokhoz jobb.
// just import FormsModule; minimal TS
Submit
Az űrlap szerkezete és validációja a sablonban él az ngModel irányelveken keresztül. Egyszerű felállítani, de az űrlap modellje implicit és nehezebb programozottan tesztelni/manipulálni.
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>
Az űrlap egy explicit objektum (FormGroup/FormControl), amelyet a TS-ben építesz fel. Ez megfigyelhető, tesztelhető és könnyen manipulálható (mezőket adhatsz hozzá/távolíthatsz el, az valueChanges segítségével reagálhatsz a változásokra).
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
A helyes űrlap-megközelítés kiválasztása fontos a karbantarthatósághoz: template-driven a gyors, egyszerű űrlapokhoz; reactive bármely összetettebb dologhoz — többlépéses varázslók, dinamikus mező halmazok, mező közötti validáció, vagy unit teszteket igénylő űrlapok.
A reactive űrlapok explicit, megfigyelhető modellje általában előnyben részesített az igazi alkalmazásokban, mivel erősebbek, tesztelhetőbbek és skálázhatóbbak, bár több kezdeti kódot igényelnek.