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>
फॉर्म हा एक स्पष्ट ऑब्जेक्ट (FormGroup/FormControl) आहे जो तुम्ही TS मध्ये तयार करता. हे यास निरीक्षणीय, चाचण्যযोग्य आणि सहजपणे हाताळण्ययोग्य बनवते (फील्ड जोडा/काढा, 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
संधारणक्षमतेसाठी योग्य फॉर्म दृष्टिकोन निवडणे महत्वाचे आहे: टेम्पलेट-चालित द्रुत, सोप्या फॉर्मसाठी; प्रतिक्रियात्मक कोणत्याही जटिलतेसाठी — बहु-पायरी विजार्ड, गतिशील फील्ड सेट, क्रॉस-फील्ड वैधीकरण, किंवा एकक चाचण्या आवश्यक असलेल्या फॉर्मसाठी.
प्रतिक्रियात्मक फॉर्मचे स्पष्ट, निरीक्षणीय मॉडेल सामान्यत: गंभीर अनुप्रयोगांमध्ये पसंद केले जाते कारण हे अधिक शक्तिशाली, चाचण्ययोग्य आणि मापनीय आहे, जरी त्यासाठी अधिक अग्रिम कोड आवश्यक आहे.