Reactive Forms in Real Applications: dynamic form generation using FormArray; custom validators and asynchronous validation; centralized error handling; submitting forms to APIs and form state management

📖 Theory

Forms जिस Data को आप Control करते हैं

FestConnect का registration form सिर्फ़ input boxes से ज़्यादा है: इसे names और emails validate करना है, एक team को members की एक variable number add करने देना है, सब कुछ valid होने तक submission block करना है, और फिर data backend को भेजना है। Angular के reactive forms इस सब को form को आपके TypeScript code में data की तरह model करके handle करते हैं, जिसे आप programmatically inspect, validate, और change कर सकते हैं।

यह lesson reactive-forms building blocks cover करता है, FormControl, FormGroup, FormArray, और validators, plus errors कैसे handle करें और एक API को submit कैसे करें। यह वह front-end skill है जिसे आप हर real form पर इस्तेमाल करेंगे।

📖 Theory

FormControl, FormGroup, FormArray

तीन classes एक reactive form build करती हैं।

एक FormControl एक single field represent करता है (name box), इसकी value और validation state hold करते हुए। एक FormGroup कई controls को एक form में bundle करता है (name, email, phone)। एक FormArray controls की एक dynamic list है, perfect जब fields की number fixed नहीं है, एक team registration जैसा जहाँ members runtime पर add या remove हो सकते हैं।

चूँकि form आपकी class में इन objects की तरह रहता है, आप इसकी value पढ़ सकते हैं, validity check कर सकते हैं, एक FormArray entry add कर सकते हैं, या इसे reset कर सकते हैं, सब code में, यही वजह है reactive forms real applications के लिए powerful हैं।

⌨️ Practical

एक FormArray वाला एक Reactive Form

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

form = new FormGroup({
  name:  new FormControl('', [Validators.required]),
  email: new FormControl('', [Validators.required, Validators.email]),
  members: new FormArray([]),        // a dynamic, growing list of controls
});

addMember() {
  this.form.controls.members.push(new FormControl('', Validators.required));
}
// members starts empty; addMember() appends a new required field at runtime.

📖 Theory

Validators, Errors, और Submitting

Validators decide करते हैं input acceptable है या नहीं। Built-in ones में Validators.required और Validators.email शामिल हैं। एक custom validator एक function है जो आप लिखते हैं जो एक error object return करता है (या null अगर valid है), 'must be a college email' जैसे rules के लिए। एक async validator एक Observable या Promise return करता है, इस्तेमाल होता है जब validation को server चाहिए, जैसे check करना एक username पहले से लिया नहीं गया है।

Error handling के लिए, आप एक control की errors, invalid, और touched state पढ़ते हैं messages सिर्फ़ user के interact करने के बाद दिखाने के लिए। Submit पर, आप form.valid check करते हैं, फिर Angular के HttpClient से form.value अपने API को भेजते हैं। Form में validate कीजिए, सिर्फ़ valid होने पर submit कीजिए।

⌨️ Practical

Valid होने पर Form को एक API को Submit करना

constructor(private http: HttpClient) {}

submit() {
  if (this.form.invalid) {
    this.form.markAllAsTouched();     // reveal validation errors
    return;
  }
  // form.value is a plain object ready to send
  this.http.post('/api/register', this.form.value)
    .subscribe(() => console.log('Registered!'));
}
// A custom validator example (returns an error object or null):
// const collegeEmail = (c: AbstractControl) =>
//   c.value?.endsWith('@college.edu') ? null : { collegeEmail: true };

🧩 Quiz

एक reactive form में, कौन सी class आपको fields की एक dynamic list build करने देती है जिसमें user runtime पर add या remove कर सकता है (जैसे team members add करना)?

1. FormControl, क्योंकि यह एक single field है
2. FormArray, controls की एक dynamic list जिसमें आप runtime पर add या remove कर सकते हैं
3. FormGroup, क्योंकि यह fixed fields group करता है
4. Validators, क्योंकि ये count control करते हैं

💭 Think first

Real Apps के लिए Template-Driven Forms से Reactive Forms को क्यों Prefer किया जाता है?

Angular में HTML में defined template-driven forms भी हैं। Larger apps reactive forms क्यों favour करते हैं? फिर tap कीजिए।

✅ Summary

Key takeaways

• Reactive forms एक form को component class में data की तरह model करते हैं, तो आप इसे code में inspect, validate, और change कर सकते हैं।
• FormControl एक field है; FormGroup controls का एक fixed set bundle करता है; FormArray एक dynamic list है जिसमें आप add या remove कर सकते हैं।
• Validators input check करते हैं: built-in (Validators.required, Validators.email), custom (एक error या null return करने वाला function), और async (एक Observable/Promise return करता है, जैसे server checks)।
• एक control की errors/invalid/touched state के through errors handle कीजिए, interaction के बाद messages दिखाते हुए।
• Submit पर, form.valid check कीजिए, फिर HttpClient से एक API को form.value भेजिए।
• Reactive forms real apps को suit करते हैं क्योंकि ये explicit, testable हैं, और dynamic और custom validation अच्छी तरह handle करते हैं।
• Memory hook: structure के लिए FormControl/Group/Array, rules के लिए validators, API को form.value।