Forms
Template-Driven Forms
ngModel-Based Approach
💡 Template-driven forms ek simple paper form jaisa hai — HTML template mein hi zyadatar logic likha jaata hai (kaunsi field required hai, waghera), Angular "peeche se" magic karके form state manage karta hai — kam code, lekin kam control bhi.
Template-driven forms ngModel (two-way binding) par based hain, aur logic zyadatar TEMPLATE (HTML) mein hi likha jaata hai — required, minlength jaise HTML validation attributes use hote hain. FormsModule import karna zaroori hai. Simple forms ke liye fast/easy hai.
// FormsModule import karna zaroori (app.module.ts ya standalone imports mein)
// Template:
// <form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)">
// <input name="email" [(ngModel)]="email" required email>
// <button type="submit" [disabled]="userForm.invalid">Submit</button>
// </form>
export class SignupComponent {
email = '';
onSubmit(form: any) {
console.log(form.value); // { email: '...' }
}
}📝
Template-driven forms ek simple paper form jaisa hai — HTML template mein hi zyadatar logic likha jaata hai (kaunsi field required hai, waghera), Angular "peeche se" magic karके form state manage karta hai — kam code, lekin kam control bhi.
1 / 6
⚡ Quick Recap
- ngModel-based, logic zyadatar TEMPLATE mein
- FormsModule import zaroori hai
- Simple forms ke liye fast, lekin complex logic ke liye limited
Is page mein (2 subtopics)
#formName="ngForm" template reference variable poore form ka STATE expose karta hai — valid, invalid, value, submitted — template mein hi in sabko access kar sakte ho, bina component class mein kuch likhe.
<!-- <form #contactForm="ngForm" (ngSubmit)="onSubmit(contactForm)">
<input name="name" [(ngModel)]="name" required>
<p *ngIf="contactForm.invalid && contactForm.submitted">
Form invalid hai!
</p>
<button [disabled]="contactForm.invalid">Submit</button>
</form> -->Tip: ngForm ka value property poore form ka data ek OBJECT ke roop mein deta hai (field names ke against values) — form ke andar sab named ngModel fields automatically is object mein shaamil ho jaate hain.
ngModelGroup related fields ko LOGICALLY group karta hai (jaise "address" ke andar street, city, pincode) — validation aur value dono NESTED structure mein milte hain, flat structure ki jagah.
<!-- <div ngModelGroup="address">
<input name="street" [(ngModel)]="street">
<input name="city" [(ngModel)]="city">
</div> -->
// Result form.value:
// { address: { street: '...', city: '...' } }Tip: ngModelGroup FormGroup (reactive forms) ke concept se similar hai — template-driven forms mein bhi nested structure organize karne ka tareeka deta hai.