Template-driven અને reactive ફોર્મ્સ વચ્ચે શું તફાવત છે?

Question

Accepted Answer

Angular ફોર્મ્સ માટે **બે અભિગમો** આપે છે. **Template-driven** ફોર્મ્સ સરળ અને HTML માં વ્યાખ્યાયિત છે; **reactive** ફોર્મ્સ TypeScript માં વ્યાખ્યાયિત છે અને વધુ નિયંત્રણ આપે છે — જટિલ, ગતિશીલ, અથવા ભારે-ચકાસણી ફોર્મ્સ માટે વધુ સારા છે. ## Template-driven — ટેમ્પલેટમાં તર્ક ```ts // just import FormsModule; minimal TS ``` ```html ``` ફોર્મ સ્ટ્રક્ચર અને ચકાસણી **ટેમ્પલેટમાં** `ngModel` નિર્દેશો દ્વારા જીવે છે. સેટ અપ કરવું સરળ છે, પરંતુ ફોર્મ મોડલ ગર્ભિત છે અને પ્રોગ્રામમેટિક રીતે પરીક્ષણ/ચાલાવવું કઠણ છે. ## Reactive — 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 ``` ફોર્મ એક **સ્પષ્ટ ઑબ્જેક્ટ** (`FormGroup`/`FormControl`) છે જે તમે TS માં બનાવો છો. આ તેને અવલોકનયોગ્ય, પરીક્ષણયોગ્ય અને ચાલાવવા માટે સરળ બનાવે છે (ક્ષેત્રો ઉમેરો/દૂર કરો, `valueChanges` દ્વારા પરિવર્તનોને પ્રતિક્રિયા કરો). ## સરખામણી ```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 ``` ## Reactive ફોર્મ્સ સ્ટ્રીમ્સ પ્રકાશિત કરે છે ```ts this.form.get("email")!.valueChanges.subscribe(v => ...); // react to changes this.form.valid; // synchronous validity check ``` ## આ શા માટે મહત્વપૂર્ણ છે સ્થિતિસ્થાપકતા માટે સાચો ફોર્મ અભિગમ પસંદ કરવો મહત્વપૂર્ણ છે: **template-driven** ઝડપી, સરળ ફોર્મ્સ માટે; **reactive** કોઈપણ જટિલ વસ્તુ માટે — મલ્ટી-સ્ટેપ વિઝાર્ડ્સ, ગતિશીલ ક્ષેત્ર સમૂહો, ક્રોસ-ક્ષેત્ર ચકાસણી, અથવા એકમ પરીક્ષણોની જરૂર હોય તેવા ફોર્મ્સ. Reactive ફોર્મ્સનું સ્પષ્ટ, અવલોકનયોગ્ય મોડલ સામાન્ય રીતે ગંભીર એપ્લિકેશનમાં પસંદ કરવામાં આવે છે કારણ કે તે વધુ શક્તિશાળી, પરીક્ષણયોગ્ય અને માપી શકાય તેવું છે, ભલે તેને વધુ પ્રાથમિક કોડની જરૂર હોય.