Angular फॉर्म्स के लिए दो दृष्टिकोण प्रदान करता है। Template-driven फॉर्म्स सरल हैं और HTML में परिभाषित हैं; reactive फॉर्म्स 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 में बनाते हैं। यह इसे observable, परीक्षणयोग्य और हेरफेर करने में आसान बनाता है (फील्ड जोड़ें/हटाएं, 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
रखरखाव के लिए सही फॉर्म दृष्टिकोण चुनना महत्वपूर्ण है: template-driven तेज, सरल फॉर्म्स के लिए; reactive किसी भी जटिल चीज़ के लिए — मल्टी-स्टेप विज़ार्ड्स, गतिशील फील्ड सेट, क्रॉस-फील्ड सत्यापन, या इकाई परीक्षणों की आवश्यकता वाले फॉर्म्स।
Reactive forms का स्पष्ट, observable मॉडल आमतौर पर गंभीर एप्लिकेशन में पसंद किया जाता है क्योंकि यह अधिक शक्तिशाली, परीक्षणयोग्य और स्केलेबल है, भले ही इसे अधिक प्रारंभिक कोड की आवश्यकता हो।