Angular ले forms का लागि दुई दृष्टिकोण प्रदान गर्दछ। Template-driven forms सरल छ र HTML मा परिभाषित गरिन्छ; reactive forms TypeScript मा परिभाषित गरिन्छ र अधिक नियन्त्रण प्रदान गर्दछ — जटिल, गतिशील, वा गहिरोमा प्रमाणित forms को लागि राम्रो।
// just import FormsModule; minimal TS
Submit
Form संरचना र validation template मा ngModel directives को माध्यमबाट बस्छ। सेटअप गर्न सरल छ, तर form model अन्तर्निहित छ र प्रोग्रामेटिक रूपमा परीक्षण/हेरफेर गर्न गाह्रो छ।
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>
Form एक स्पष्ट object (FormGroup/FormControl) हो जसलाई तपाई TS मा निर्माण गर्नुहुन्छ। यसले यसलाई observable, testable, र हेरफेर गर्न सजिलो बनाउँछ (fields थप्न/हटाउन, 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
सही form दृष्टिकोण छनोट गर्न महत्त्वपूर्ण छ: template-driven द्रुत, सरल forms को लागि; reactive कुनै पनि जटिल चीजको लागि — बहु-चरण wizards, गतिशील field sets, cross-field validation, वा unit tests की आवश्यकता हुने forms।
Reactive forms को स्पष्ट, observable model सामान्यतया गम्भीर applications मा पसन्द गरिन्छ किनभने यो अधिक शक्तिशाली, testable, र scalable छ, यद्यपि यसले अधिक शुरुवाती code चाहिन्छ।