Koks yra skirtumas tarp šablonais pagrįstų ir reaktyvių formų?

Question

Accepted Answer

Angular siūlo **du būdus** darbui su formomis. **Šablonais pagrįstos** formos yra paprastos ir apibrėžtos HTML; **reaktyvios** formos yra apibrėžtos TypeScript ir suteikia daugiau kontrolės — geriau tinka sudėtingoms, dinamiškoms arba didelę validaciją atliekančioms formoms. ## Šablonais pagrįstos — logika šablone ```ts // just import FormsModule; minimal TS ``` ```html ``` Formos struktūra ir validacija gyvena **šablone** naudojant `ngModel` direktyvas. Paprasta nustatyti, tačiau formos modelis yra numanomas ir sunkiau testuoti/manipuliuoti programiškai. ## Reaktyvios — formos modelis TypeScript ```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 ``` Forma yra **aiški objektas** (`FormGroup`/`FormControl`), kurį kuriate TS. Tai daro ją stebimą, testuojamą ir lengvai manipuliuojamą (laukų pridėjimas/šalinimas, reagavimas į pokyčius per `valueChanges`). ## Palyginimas ```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 ``` ## Reaktyvios formos suteikia srautus ```ts this.form.get("email")!.valueChanges.subscribe(v => ...); // react to changes this.form.valid; // synchronous validity check ``` ## Kodėl tai svarbu Teisingos formos tipo pasirinkimas yra svarbus priežiūrai: **šablonais pagrįstos** greitoms, paprastoms formoms; **reaktyvios** bet kam sudėtingam — daugiažingiams žingsniams, dinaminiams laukų rinkiniams, tarpžingiams validacijai arba formoms, kurioms reikalingi vienetų testai. Reaktyvių formų aiški, stebima modelis paprastai labiau pageidaujamas rimtuose programėliuose, nes yra galingesnis, testuojamas ir mastelis, nors reikalingas daugiau pirminės kodo.