Course Progress 65%

Angular Template-Driven Forms

← Angular Forms Angular Reactive Forms →

Angular Template-Driven Forms एक simple और declarative approach है जिसमें form का ज़्यादातर logic HTML template में लिखा जाता है। यह approach small forms और basic user input scenarios के लिए बहुत suitable होती है और beginners के लिए समझना आसान होती है।

इस chapter में हम Template-Driven Forms को detail में समझेंगे, form directives कैसे काम करती हैं, validation कैसे add होती है, और real-world usage में किन बातों का ध्यान रखना चाहिए।

Template-Driven Forms क्या होती हैं

Template-Driven Forms में:

  • Form structure HTML में define होता है
  • Angular directives form behavior control करती हैं
  • Component class minimal रहती है
  • Two-way binding heavily use होती है

Angular internally एक form model create करता है, लेकिन वह model developer को directly दिखाई नहीं देता।

Required Module Setup

Template-Driven Forms use करने के लिए FormsModule import करना जरूरी है।

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-form',
  standalone: true,
  imports: [FormsModule],
  templateUrl: './form.component.html'
})
export class FormComponent {}

Standalone Angular में यही recommended तरीका है।

Basic Template-Driven Form Example

सबसे पहले एक simple login form देखते हैं।

<form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm)">
  
  <label>
    Username
    <input type="text" name="username" ngModel>
  </label>

  <label>
    Password
    <input type="password" name="password" ngModel>
  </label>

  <button type="submit">Login</button>

</form>

Important Points

  • ngForm directive form को Angular form में convert करती है
  • name attribute mandatory है
  • ngModel input को form model से bind करता है
  • (ngSubmit) form submit handle करता है

ngForm Object को समझना

#loginForm="ngForm" template reference variable है।

इससे आप:

  • Form value access कर सकते हैं
  • Validation state check कर सकते हैं
  • Reset या submit logic control कर सकते हैं
onSubmit(form: any) {
  console.log(form.value);
}

ngModel और Two-Way Binding

Template-driven forms में ngModel core directive है।

<input name="email" [(ngModel)]="email">

यह input value को component property से sync करता है।

Behind the scenes Angular:

  • Input change detect करता है
  • Form control update करता है
  • Validation re-run करता है

Validation in Template-Driven Forms

Angular HTML attributes के साथ validation provide करता है।

Required Validation

<input name="email" ngModel required>

Email Validation

<input name="email" ngModel email>

Min / Max Length

<input name="username" ngModel minlength="3" maxlength="10">

Angular automatically इन attributes को validators में convert कर देता है।

Validation State Check करना

हर input का state Angular track करता है।

<input
  name="email"
  ngModel
  required
  #email="ngModel"
>

<div *ngIf="email.invalid && email.touched">
  Email is required
</div>

Common states:

  • valid / invalid
  • touched / untouched
  • dirty / pristine

Form-Level Validation State

पूरा form भी validation state expose करता है।

<button type="submit" [disabled]="loginForm.invalid">
  Submit
</button>

Form तब तक submit नहीं होगा जब तक सभी controls valid न हों।

Grouping Controls with ngModelGroup

Form fields को logical groups में organize किया जा सकता है।

<div ngModelGroup="address">
  <input name="city" ngModel>
  <input name="zip" ngModel>
</div>

Form value structure:

{
  address: {
    city: '',
    zip: ''
  }
}

यह complex forms में data organization आसान बनाता है।

Resetting a Template-Driven Form

Form reset करने के लिए reset() method use की जाती है।

onSubmit(form: any) {
  console.log(form.value);
  form.reset();
}

Reset करने पर:

  • Values clear हो जाती हैं
  • Validation state reset हो जाती है

Handling Form Submission

Template-driven forms में submission simple होता है।

<form (ngSubmit)="onSubmit(loginForm)" #loginForm="ngForm">

Angular default browser submit behavior को रोक देता है और form data component तक safely पहुंचाता है।

Limitations of Template-Driven Forms

Template-driven forms powerful होते हुए भी कुछ limitations रखते हैं:

  • Complex validation manage करना मुश्किल
  • Dynamic controls add/remove करना hard
  • Large forms में readability कम
  • Unit testing कठिन

इसलिए enterprise-level apps में इन्हें limited use किया जाता है।

कब Template-Driven Forms use करें

Best scenarios:

  • Simple contact forms
  • Login / signup forms
  • Small applications
  • Rapid prototyping

Common Mistakes

  • name attribute भूल जाना
  • Validation messages हमेशा show करना
  • Component logic में form state handle करना
  • Large forms के लिए template-driven approach चुनना

Angular Template-Driven Forms beginners के लिए excellent starting point हैं। अगले chapter में हम Reactive Forms को deep dive में समझेंगे, जो complex और scalable form handling के लिए Angular का सबसे powerful solution है।

← Angular Forms Angular Reactive Forms →
  • Home