Kakšna je razlika med obrazci, vodenimi s predlogami, in reaktivnimi obrazci?

Question

IT Interview Practice · Accepted Answer

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. ## Obrazci, vodenimi s predlogami — logika v predlogi ```ts // just import FormsModule; minimal TS ``` ```html ``` 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. ## Reaktivni — model obrazca v TypeScriptu ```ts 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); } } ``` ```html ``` 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`). ## Primerjava ```text 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 ``` ## Reaktivni obrazci razkrivajo tokove ```ts this.form.get("email")!.valueChanges.subscribe(v => ...); // react to changes this.form.valid; // synchronous validity check ``` ## Zakaj je to pomembno 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.

Obrazci, vodenimi s predlogami — logika v predlogi

Reaktivni — model obrazca v TypeScriptu

Primerjava

Reaktivni obrazci razkrivajo tokove

Zakaj je to pomembno

Povezana vprašanja