Angular ponuja dva pristopa k obrazcem. Obrazci, vodenimi s predlogami, so preprosti in definirani v HTML; reaktivni obrazci so definirani v TypeScriptu in ponujajo več nadzora — boljši za zapletene, dinamične ali intenzivno preverjane obrazce.
// just import FormsModule; minimal TS
Submit
Struktura obrazca in preverjanje veljave živita v predlogi prek direktiv ngModel. Preprosto za nastavitev, a je model obrazca impliciten in težje ga je testirati/manipulirati programsko.
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>
Obrazec je izrecen objekt (FormGroup/FormControl), ki ga zgradite v TS. To ga naredi opazljivega, testabilnega in enostavnega za manipulacijo (dodajanje/odstranjevanje polj, odziv na spremembe prek 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
Izbira pravilnega pristopa k obrazcem je pomembna za vzdrževanje: obrazci, vodenimi s predlogami, za hitre, preproste obrazce; reaktivni za karkoli zapletenega — večstopenjske čarovnike, dinamične nabore polj, preverjanje med polji ali obrazce, ki potrebujejo teste enot.
Ekspliciten, opazljiv model reaktivnih obrazcev se splošno raje uporablja v resnih aplikacijah, ker je bolj zmogljiv, testabilen in razširljiv, čeprav zahteva več uvodno napisanega koda.