Theory
એક જ form બનાવવાની બે રીત
FestConnect ના registration form માં નામ (ફરજિયાત), email (સાચા ઢાળનું) અને event ની પસંદગી જોઈએ છે. Angular એને બનાવવાની બે રીત આપે છે, અને એ બેમાંથી પસંદ કરવું એ ખરો નિર્ણય છે, નાની અમથી વિગત નહીં.
Template-driven forms logic ને HTML માં જ મૂકે છે, જે ઝડપી અને સાદું પડે છે. Reactive forms form ની રચનાને TypeScript class માં વ્યાખ્યાયિત કરે છે, જેમાં code વધુ લખવો પડે પણ તાકાત તથા ચકાસણીની સગવડ વધુ મળે છે. બંને VALIDATION ને ટેકો આપે છે. આ પાઠમાં બંને રીતો, એમના ફાયદા-ગેરફાયદા અને validation શીખશો, જેથી FestConnect ની જરૂરિયાત માટે તથા પરીક્ષા માટે તમે સાચી રીત પસંદ કરી શકો.
At a glance
Template-driven સામે reactive forms
| પાસું | Template-driven | Reactive |
|---|---|---|
| Logic ક્યાં રહે છે | HTML template માં (ngModel) | TypeScript class માં (FormGroup/FormControl) |
| કયું module જોઈએ | FormsModule | ReactiveFormsModule |
| કેટલું અઘરું | સાદું, ઓછો code | વધુ ગોઠવણ, વધુ કાબૂ |
| કોના માટે શ્રેષ્ઠ | સાદાં, નાનાં forms | અઘરાં, બદલાતાં, ચકાસી શકાય એવાં forms |
| Validation | Template માં attributes વડે | Class માં Validators વડે |
Theory
બે રીતો
Template-driven: તમે દરેક input પર ngModel વાપરીને form ને HTML માં જ બનાવો છો અને Angular ને template પરથી form નું model તારવી લેવા દો છો. એ ઝડપી છે અને directives વાળા સાદા HTML જેવું જ વંચાય છે, એટલે સાદા contact form માટે ઉત્તમ છે. Logic template માં રહે છે.
Reactive: તમે FormGroup (આખું form) અને FormControl (દરેક field) વાપરીને form ની રચના CLASS માં વ્યાખ્યાયિત કરો છો, અને પછી એને template સાથે જોડો છો. Form નું model સ્પષ્ટ TypeScript હોય છે, એટલે એ ચકાસી શકાય એવું, મોટા પાયે વધારી શકાય એવું અને ચાલુ કામે બદલવામાં સહેલું બને છે. Logic class માં રહે છે.
સાદો નિયમ આ રહ્યો: સાદાં forms માટે template-driven, અને અઘરાં કે બદલાતાં forms માટે reactive. મોટી ખરી apps સામાન્ય રીતે reactive forms ને જ પસંદ કરે છે, કારણ કે એ વધુ કાબૂ આપે છે.
Practical
Validation સાથેનું reactive form
import { FormGroup, FormControl, Validators } from '@angular/forms';
export class RegisterComponent {
// form નું model, CLASS માં વ્યાખ્યાયિત:
registerForm = new FormGroup({
name: new FormControl('', [Validators.required, Validators.minLength(2)]),
email: new FormControl('', [Validators.required, Validators.email]),
});
submit() {
if (this.registerForm.valid) {
// this.registerForm.value પર પ્રક્રિયા કરો
}
}
}
// Template એની સાથે જોડાય છે અને ભૂલ બતાવે છે:
// <form [formGroup]="registerForm" (ngSubmit)="submit()">
// <input formControlName="name">
// <span *ngIf="registerForm.get('name')?.invalid">Name required</span>
// </form>
Theory
Validation અને form ની state
બંને રીતો અંદરથી મળતાં validators વાપરે છે: required, minLength, email, pattern અને બીજાં. Reactive forms માં તમે એમને class માં ગણાવો છો (Validators.required); template-driven માં તમે attributes વાપરો છો (required, minlength).
Angular દરેક control ની STATE પર નજર રાખે છે, જેનો ઉપયોગ કરીને તમે યોગ્ય સમયે સંદેશા બતાવો છો:
- valid / invalid: એ પોતાના validators માંથી પસાર થાય છે કે નહીં?
- touched: વપરાશકાર એ field સુધી જઈને પાછો ફર્યો છે કે નહીં?
- dirty: કિંમત બદલાઈ છે કે નહીં?
- errors: કયાં validations નિષ્ફળ ગયાં
એટલે તમે 'નામ ફરજિયાત છે' ત્યારે જ બતાવો છો જ્યારે field invalid હોય અને touched પણ હોય (તરત નહીં, નહીં તો એ કચકચ જેવું લાગે). State પર આધારિત આ validation જ Angular ને forms માં ઓપ આપતો પ્રતિભાવ આપવા દે છે, અને એ બંને શૈલીમાં લાગુ પડે છે.
Quiz
Angular માં template-driven અને reactive forms વચ્ચેનો મુખ્ય ભેદ કયો છે?
- Template-driven forms ને validate કરી શકાતાં નથી
- Template-driven forms form ની logic ને HTML template માં રાખે છે (ngModel વડે); reactive forms form નું model TypeScript class માં વ્યાખ્યાયિત કરે છે (FormGroup/FormControl)
- Reactive forms માટે કોઈ module import કરવાની જરૂર પડતી નથી
- એ એક જ વસ્તુનાં બે નામ છે
Show the answer
Template-driven forms form ની logic ને HTML template માં રાખે છે (ngModel વડે); reactive forms form નું model TypeScript class માં વ્યાખ્યાયિત કરે છે (FormGroup/FormControl)
મુખ્ય ભેદ એ છે કે form ની logic ક્યાં રહે છે: template-driven forms ngModel જેવાં directives વાપરીને model ને HTML TEMPLATE માં જ બનાવે છે (સાદું, ઓછો code), જ્યારે reactive forms FormGroup અને FormControl વાપરીને form નું model TypeScript CLASS માં સ્પષ્ટપણે વ્યાખ્યાયિત કરે છે (વધુ શક્તિશાળી, ચકાસી શકાય એવું, અઘરાં forms માટે વધુ સારું). વિકલ્પ A ખોટો છે: બંને validation ને ટેકો આપે છે (template-driven attributes વડે, reactive Validators વડે). વિકલ્પ C ખોટો છે: reactive forms ને ReactiveFormsModule જોઈએ (અને template-driven ને FormsModule). વિકલ્પ D આખો પાઠ જે ભેદ સમજાવે છે એને જ નકારે છે. સાદાં forms માટે template-driven પસંદ કરો, અને અઘરાં, બદલાતાં કે ચકાસવાં પડે એવાં forms માટે reactive.
Think first
FestConnect માટે કઈ form શૈલી?
FestConnect નું registration અત્યારે સાદું છે (નામ, email, event), પણ આગળ જતાં દરેક event ના પ્રકાર પ્રમાણે બદલાતાં fields ઉમેરાઈ શકે છે. તમે કઈ રીત પસંદ કરો, અને શા માટે? વિચારીને પછી tap કરો.
Show the answer
દરેક event ના પ્રકાર પ્રમાણે બદલાતાં fields તરફ વધવાની યોજના જોતાં REACTIVE forms વધુ સારી પસંદગી છે. Reactive forms model ને class માં વ્યાખ્યાયિત કરે છે, એટલે તમે controls ને code વડે ઉમેરી, કાઢી કે બદલી શકો છો (દાખલા તરીકે ફક્ત coding contest માટે જ 'team size' નું control ઉમેરવું), અને સ્પષ્ટ model ને validate તથા ચકાસવું સહેલું પડે છે. Template-driven forms template પર આધારિત હોવાથી બદલાતી રચનાઓ માટે અણઘડ પડે છે. જો form સાદું અને એકનું એક જ રહેવાનું નક્કી હોત, તો template-driven ચાલી જાત અને ઝડપી પણ પડત.
સામાન્ય માર્ગદર્શન આ રહ્યું: અઘરું, બદલાતું કે મજબૂત validation અને ચકાસણી માગતું હોય એ બધા માટે reactive; અને સાદાં, સ્થિર forms માટે template-driven. FestConnect માં જટિલતા આવવાની જ છે, એટલે પછીથી બદલવાને બદલે શરૂઆતથી જ reactive માં રોકાણ કરો. Form ની શૈલી એના આજના રૂપ પ્રમાણે નહીં, પણ એના ભવિષ્ય પ્રમાણે પસંદ કરો.
Watch out
Forms ની ભૂલો
ખોટું module: template-driven માટે FormsModule, reactive માટે ReactiveFormsModule; ખોટું હોય તો form તૂટી પડે છે.
ભૂલો બહુ વહેલી બતાવવી: invalid ની સાથે touched કે dirty પણ તપાસો, જેથી વપરાશકાર કશું લખે એ પહેલાં જ કચકચ ન થાય.
એક જ form માં બંને શૈલી ભેળવવી: દરેક form માટે એક જ રીત પસંદ કરો.
formControlName વગરનું reactive form: template માં દરેક input ને એના control ના નામ સાથે જોડો.
Submit વખતે form.valid અવગણવું: પ્રક્રિયા કરતાં પહેલાં validity તપાસો, inputs પર આંખ મીંચીને ભરોસો ન કરો (server બાજુનું validation પણ એટલું જ જરૂરી છે).
Theory
Forms પતી ગયાં; હવે server સાથે જોડાણ
FestConnect નું Angular front-end હવે data બતાવી, ઢાળમાં ગોઠવી અને ભેગો કરી શકે છે. છેલ્લો ટુકડો એને BACK-END સાથે જોડવાનો છે, એટલે કે Unit 1 વાળા MongoDB આધારિત API સાથે, જેથી events ખરેખર load અને save થાય. Angular નો છેલ્લો પાઠ services અને dependency injection ને વ્યવહારમાં શીખવે છે: REST APIs બોલાવવા માટે HttpClient વાપરવું અને જવાબોને Observables તથા RxJS વડે સંભાળવા. એથી આધુનિક stack પૂરો થાય છે: Angular front-end NoSQL back-end સાથે વાત કરતું.
Summary
Key takeaways
- Angular માં forms બનાવવાની બે રીત છે: template-driven અને reactive.
- Template-driven: form ની logic ngModel વડે HTML template માં; સાદું, ઓછો code; FormsModule જોઈએ.
- Reactive: form નું model FormGroup/FormControl વડે TypeScript class માં; શક્તિશાળી, ચકાસી શકાય એવું; ReactiveFormsModule જોઈએ.
- બંને validators ને ટેકો આપે છે (required, minLength, email, pattern), જે template માં કે class માં લગાડાય છે.
- Form કે control ની state (valid, invalid, touched, dirty, errors) નક્કી કરે છે કે validation ના સંદેશા ક્યારે બતાવવા.
- સાદાં forms માટે template-driven પસંદ કરો, અઘરાં કે બદલાતાં forms માટે reactive.
- યાદ રાખવાની કડી: template-driven એટલે logic HTML માં, reactive એટલે model class માં.