Angular دو طریقے فراہم کرتا ہے forms کے لیے۔ Template-driven forms سادہ ہیں اور HTML میں تعریف کیے جاتے ہیں؛ reactive forms TypeScript میں تعریف کیے جاتے ہیں اور زیادہ کنٹرول فراہم کرتے ہیں — پیچیدہ، متحرک، یا بہت زیادہ validated forms کے لیے بہتر ہیں۔
// just import FormsModule; minimal TS
Submit
Form کی ساخت اور validation template میں رہتی ہے ngModel directives کے ذریعے۔ سیٹ اپ کرنا سادہ ہے، لیکن form model implicit ہے اور programmatically ٹیسٹ کرنا/سنبھالنا مشکل ہے۔
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 ایک explicit object ہے (FormGroup/FormControl) جو آپ TS میں بناتے ہیں۔ یہ اسے observable، testable، اور سنبھالنے میں آسان بناتا ہے (fields شامل/ہٹائیں، valueChanges کے ذریعے changes پر رد عمل دیں)۔
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 approach منتخب کرنا maintainability کے لیے اہم ہے: template-driven تیز، سادہ forms کے لیے؛ reactive کسی بھی پیچیدہ چیز کے لیے — multi-step wizards، dynamic field sets، cross-field validation، یا forms جن کو unit tests کی ضرورت ہے۔
Reactive forms کا explicit، observable model عام طور پر سنجیدہ applications میں ترجیح دی جاتی ہے کیونکہ یہ زیادہ طاقتور، testable، اور scalable ہے، اگرچہ اس میں شروع میں زیادہ code درکار ہے۔