Angular రూపాలకు రెండు విధానాలను అందిస్తుంది. టెంప్లేట్-చాలిత రూపాలు సరళమైనవి మరియు HTML లో నిర్వచించబడ్డాయి; రియాక్టివ్ రూపాలు TypeScript లో నిర్వచించబడ్డాయి మరియు మరిన్ని నియంత్రణను అందిస్తాయి — సంక్లిష్ట, డైనమిక్ లేదా భారీ-ధృవీకరణ రూపాలకు మంచివి.
// just import FormsModule; minimal TS
Submit
ఫారమ్ నిర్మాణం మరియు ధృవీకరణ ngModel నిర్దేశాల ద్వారా టెంప్లేట్ లో నివసిస్తాయి. సెట్అప్ చేయడం సులభం, కానీ ఫారమ్ మోడల్ స్పష్టమైనది కాదు మరియు ప్రోగ్రామ్గా పరీక్ష/తారుమారు చేయడం కష్టం.
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>
ఫారమ్ TS లో నిర్మించిన స్పష్ట వస్తువు (FormGroup/FormControl) ఉంది. ఇది దీనిని పరిశీలించదగినది, పరీక్ష చేయదగినది, మరియు తారుమారు చేయడానికి సులభమైనది (ఫీల్డ్లను జోడించండి/తీసివేయండి, 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
సరైన ఫారమ్ విధానం ఎంచుకోవడం నిర్వహణకు ముఖ్యమైనది: టెంప్లేట్-చాలిత త్వరిత, సరళ రూపాల కోసం; రియాక్టివ్ ఎటువంటి సంక్లిష్టం కోసం — బహు-దశ విజార్డ్లు, డైనమిక్ ఫీల్డ్ సెట్లు, క్రాస్-ఫీల్డ్ ధృవీకరణ, లేదా యూనిట్ పరీక్షల అవసరమైన ఫారమ్లు.
రియాక్టివ్ రూపాల స్పష్ట, పరిశీలించదగిన నమూనా సాధారణంగా గంభీర అనువర్తనాలలో ఆదరించబడుతుంది ఎందుకంటే ఇది మరింత శక్తిశాలి, పరీక్ష చేయదగినది, మరియు స్కేలేబుల్గా ఉంటుంది, అయితే దీనికి ఎక్కువ ముందుగా కోడ్ అవసరం.