रिएक्टिव फॉर्म्स

FormGroup और FormControl

एक FormGroup कई FormControls को एक साथ बाँधता है। इसे कंपोनेंट क्लास से परिभाषित और नियंत्रित किया जाता है।

import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';

@Component({ standalone: true, imports: [ReactiveFormsModule], template: `...` })
export class SignupComponent {
  form = new FormGroup({
    email: new FormControl(''),
    password: new FormControl(''),
  });

  onSubmit() {
    console.log(this.form.value);
  }
}

टेम्पलेट में बाइंड करना

[formGroup], टेम्पलेट को मॉडल से जोड़ता है; formControlName हर इनपुट को उसके control से जोड़ता है।

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <input formControlName="email">
  <input formControlName="password" type="password">
  <button type="submit">Sign up</button>
</form>

इसे कब चुनें

जटिल, डायनामिक या भारी-टेस्टिंग वाले फॉर्म के लिए reactive forms बेहतर स्केल करते हैं — मॉडल स्पष्ट है और यूनिट-टेस्ट करना आसान।