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

તમારા કાબૂમાં રહેતું data એટલે form

FestConnect નું registration form ફક્ત input ના ખાનાં કરતાં ઘણું વધારે છે: એણે નામ અને email ચકાસવાં પડે, ટીમને ગમે તેટલા સભ્યો ઉમેરવા દેવા પડે, બધું માન્ય ન થાય ત્યાં સુધી submit અટકાવવું પડે, અને પછી data backend ને મોકલવો પડે. Angular નાં reactive forms આ બધું એ રીતે સંભાળે છે કે form ને તમારા TypeScript code માં data તરીકે રજૂ કરે છે, જેને તમે તપાસી શકો, ચકાસી શકો અને code થી બદલી શકો.

આ પાઠ reactive forms ના ઘટકો આવરી લે છે, એટલે કે FormControl, FormGroup, FormArray અને validators, ઉપરાંત ભૂલો કઈ રીતે સંભાળવી અને API ને submit કઈ રીતે કરવું. આ એવું front end નું કૌશલ્ય છે જે તમે દરેક ખરા form પર વાપરશો.

📖 Theory

FormControl, FormGroup, FormArray

Reactive form ત્રણ classes થી બંધાય છે.

FormControl એક જ field ને રજૂ કરે છે (જેમ કે નામનું ખાનું), અને એની કિંમત તથા ચકાસણીની સ્થિતિ સાચવે છે. FormGroup અનેક controls ને એક form માં બાંધે છે (નામ, email, ફોન). FormArray એ controls ની ગતિશીલ યાદી છે, જે ત્યારે બરાબર બંધ બેસે જ્યારે fields ની સંખ્યા નક્કી ન હોય, જેમ કે ટીમની નોંધણી જ્યાં સભ્યો ચાલુ કામ દરમિયાન ઉમેરી કે કાઢી શકાય.

Form તમારા class માં આ પદાર્થો તરીકે જ રહેતું હોવાથી તમે એની કિંમત વાંચી શકો, માન્યતા તપાસી શકો, FormArray માં નવી entry ઉમેરી શકો કે એને reset કરી શકો, અને એ બધું code માં, અને એ જ કારણે reactive forms ખરી applications માટે શક્તિશાળી બને છે.

⌨️ 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([]),        // controls ની ગતિશીલ, વધતી જતી યાદી
});

addMember() {
  this.form.controls.members.push(new FormControl('', Validators.required));
}
// members ખાલી શરૂ થાય છે; addMember() ચાલુ કામ દરમિયાન નવું required field ઉમેરે છે.

📖 Theory

Validators, ભૂલો અને submit કરવું

Validators નક્કી કરે છે કે input સ્વીકાર્ય છે કે નહીં. અંદરથી મળતાં validators માં Validators.required અને Validators.email આવે છે. Custom validator એટલે તમે લખેલું એવું function જે ભૂલનો પદાર્થ પાછો આપે (અથવા માન્ય હોય તો null), જેમ કે 'કૉલેજનું email હોવું જોઈએ' જેવા નિયમ માટે. Async validator Observable કે Promise પાછું આપે છે, અને એ ત્યારે વપરાય જ્યારે ચકાસણી માટે server જોઈએ, જેમ કે username પહેલેથી લેવાયેલું નથી એની ખાતરી કરવી.

ભૂલો સંભાળવા માટે તમે control ની errors, invalid અને touched સ્થિતિ વાંચો છો, જેથી સંદેશા ત્યારે જ દેખાય જ્યારે user એ field સાથે કંઈક કર્યું હોય. Submit વખતે તમે form.valid તપાસો છો, અને પછી Angular ના HttpClient વડે form.value તમારા API ને મોકલો છો. Form માં જ ચકાસો, અને માન્ય હોય ત્યારે જ submit કરો.

⌨️ Practical

Form માન્ય હોય ત્યારે એને API ને submit કરવું

constructor(private http: HttpClient) {}

submit() {
  if (this.form.invalid) {
    this.form.markAllAsTouched();     // ચકાસણીની ભૂલો દેખાડો
    return;
  }
  // form.value એ મોકલવા માટે તૈયાર સાદો પદાર્થ છે
  this.http.post('/api/register', this.form.value)
    .subscribe(() => console.log('Registered!'));
}
// custom validator નો દાખલો (ભૂલનો પદાર્થ કે null પાછો આપે છે):
// const collegeEmail = (c: AbstractControl) =>
//   c.value?.endsWith('@college.edu') ? null : { collegeEmail: true };

🧩 Quiz

Reactive form માં કયો class તમને એવી ગતિશીલ fields ની યાદી બનાવવા દે છે જેમાં user ચાલુ કામ દરમિયાન ઉમેરી કે કાઢી શકે (જેમ કે ટીમના સભ્યો ઉમેરવા)?

1. FormControl, કારણ કે એ એક જ field છે
2. FormArray, એટલે કે controls ની ગતિશીલ યાદી જેમાં ચાલુ કામ દરમિયાન ઉમેરી કે કાઢી શકાય
3. FormGroup, કારણ કે એ નક્કી fields ને જૂથમાં બાંધે છે
4. Validators, કારણ કે એ સંખ્યા પર કાબૂ રાખે છે

💭 Think first

ખરી apps માટે template-driven forms કરતાં reactive forms કેમ પસંદ કરાય છે?

Angular માં HTML માં વ્યાખ્યાયિત થતાં template-driven forms પણ છે. તો મોટી apps reactive forms ને કેમ પસંદ કરે છે? વિચારીને પછી tap કરો.

✅ Summary

Key takeaways

• Reactive forms form ને component class માં data તરીકે રજૂ કરે છે, જેથી તમે એને code માં તપાસી, ચકાસી અને બદલી શકો.
• FormControl એક field છે; FormGroup નક્કી controls ના સમૂહને બાંધે છે; FormArray એવી ગતિશીલ યાદી છે જેમાં ઉમેરી કે કાઢી શકાય.
• Validators input તપાસે છે: અંદરથી મળતાં (Validators.required, Validators.email), custom (ભૂલ કે null પાછું આપતું function) અને async (Observable કે Promise પાછું આપે, દા.ત. server પર તપાસ).
• ભૂલો control ની errors, invalid અને touched સ્થિતિ દ્વારા સંભાળો, અને સંદેશા user ના સંપર્ક પછી જ બતાવો.
• Submit વખતે form.valid તપાસો, અને પછી HttpClient વડે form.value ને API ને મોકલો.
• Reactive forms ખરી apps ને અનુકૂળ છે કારણ કે એ સ્પષ્ટ છે, પરીક્ષણક્ષમ છે, અને ગતિશીલ તથા custom ચકાસણી સારી રીતે સંભાળે છે.
• યાદ રાખવાની કડી: રચના માટે FormControl, FormGroup અને FormArray, નિયમો માટે validators, અને API ને form.value.