Theory
Same Form बनाने के दो तरीके
FestConnect के registration form को एक name (required), एक email (valid format), और एक event choice चाहिए। Angular आपको इसे बनाने के दो तरीके देता है, और इनके बीच choose करना एक real decision है, कोई detail नहीं।
Template-driven forms logic को HTML में डालते हैं, quick और simple। Reactive forms form की structure को TypeScript class में define करते हैं, ज़्यादा code पर ज़्यादा power और testability। दोनों VALIDATION support करते हैं। यह lesson दोनों approaches, इनके trade-offs, और validation cover करता है, ताकि आप FestConnect की needs और exam के लिए सही एक पिक कर सकें।
At a glance
Template-Driven बनाम Reactive Forms
| Aspect | Template-Driven | Reactive |
|---|---|---|
| Logic कहाँ रहता है | HTML template में (ngModel) | TypeScript class में (FormGroup/FormControl) |
| चाहिए Module | FormsModule | ReactiveFormsModule |
| Complexity | Simple, कम code | ज़्यादा setup, ज़्यादा control |
| इसके लिए Best | Simple, छोटे forms | Complex, dynamic, testable forms |
| Validation | Template में attributes | Class में Validators |
Theory
दो Approaches
Template-driven: आप HTML में हर input पर ngModel इस्तेमाल करके form build करते हैं और Angular को template से form model infer करने देते हैं। यह quick है और directives वाली plain HTML जैसा पढ़ता है, एक simple contact form के लिए great। Logic template में रहता है।
Reactive: आप CLASS में form की structure DEFINE करते हैं FormGroup (पूरा form) और FormControl (हर field) इस्तेमाल करके, फिर इसे template से bind करते हैं। Form model explicit TypeScript है, तो यह testable, scalable है, और dynamically बदलना आसान है। Logic class में रहता है।
Rule of thumb: simple forms के लिए template-driven, complex या dynamic वालों के लिए reactive। बड़े real apps usually control के लिए reactive forms favour करते हैं जो ये देते हैं।
Practical
Validation वाला एक Reactive Form
import { FormGroup, FormControl, Validators } from '@angular/forms';
export class RegisterComponent {
// The form model, defined in the CLASS:
registerForm = new FormGroup({
name: new FormControl('', [Validators.required, Validators.minLength(2)]),
email: new FormControl('', [Validators.required, Validators.email]),
});
submit() {
if (this.registerForm.valid) {
// process this.registerForm.value
}
}
}
// Template binds to it and shows an error:
// <form [formGroup]="registerForm" (ngSubmit)="submit()">
// <input formControlName="name">
// <span *ngIf="registerForm.get('name')?.invalid">Name required</span>
// </form>
Theory
Validation और Form State
दोनों approaches built-in validators इस्तेमाल करते हैं: required, minLength, email, pattern, और बाकी। Reactive forms में आप इन्हें class में list करते हैं (Validators.required); template-driven में आप attributes इस्तेमाल करते हैं (required, minlength)।
Angular हर control का STATE track करता है, जिसे आप सही समय पर messages दिखाने के लिए इस्तेमाल करते हैं:
- valid / invalid: क्या यह अपने validators pass करता है?
- touched: क्या user ने field visit करके छोड़ी?
- dirty: क्या value बदली है?
- errors: कौन सी validations fail हुईं
तो आप 'Name is required' सिर्फ़ तब दिखाते हैं जब field invalid AND touched हो (immediately नहीं, जो nag करेगा)। यह state-driven validation है जिससे Angular polished form feedback देता है, और यह दोनों form styles में apply होता है।
Quiz
Angular में template-driven और reactive forms के बीच key difference क्या है?
- Template-driven forms validate नहीं हो सकते
- Template-driven forms form logic को HTML template में रखते हैं (ngModel के through); reactive forms form model को TypeScript class में define करते हैं (FormGroup/FormControl)
- Reactive forms को कोई module import नहीं चाहिए
- ये same चीज़ के दो नाम हैं
Show the answer
Template-driven forms form logic को HTML template में रखते हैं (ngModel के through); reactive forms form model को TypeScript class में define करते हैं (FormGroup/FormControl)
Core difference यह है कि form logic KAHAN रहता है: template-driven forms model HTML TEMPLATE में ngModel जैसे directives इस्तेमाल करके build करते हैं (simpler, कम code), जबकि reactive forms TypeScript CLASS में explicitly FormGroup और FormControl इस्तेमाल करके form model define करते हैं (ज़्यादा powerful, testable, complex forms के लिए बेहतर)। Option A false है: दोनों validation support करते हैं (template-driven attributes से, reactive Validators से)। Option C ग़लत है: reactive forms को ReactiveFormsModule चाहिए (template-driven को FormsModule चाहिए)। Option D उस distinction को deny करता है जो पूरा lesson draw करता है। Simple forms के लिए template-driven, complex/dynamic/testable वालों के लिए reactive choose कीजिए।
Think first
FestConnect के लिए कौन सी Form Style?
FestConnect का registration अभी simple है (name, email, event) पर हर event type के लिए dynamic fields add करने के लिए grow कर सकता है। आप कौन सा form approach choose करेंगे, और क्यों? फिर tap कीजिए।
Show the answer
DYNAMIC, per-event-type fields में grow करने के plan को देखते हुए, REACTIVE forms बेहतर choice हैं। Reactive forms model को class में define करते हैं, तो आप controls को PROGRAMMATICALLY add, remove, या change कर सकते हैं (जैसे coding contest के लिए ही एक 'team size' control add करना), और explicit model validate और test करना आसान है। Template-driven forms, template-based होने के कारण, dynamic structures के लिए awkward हो जाते हैं। अगर form simple और fixed रहने guaranteed होता, template-driven fine और तेज़ होता। General guidance: कुछ भी complex, dynamic, या strong validation/testing चाहने वाले के लिए reactive; simple, static forms के लिए template-driven। चूँकि FestConnect complexity anticipate करता है, बाद में migrate करने की बजाय शुरू से reactive में invest कीजिए। Form style को form के future से match कीजिए, सिर्फ़ इसके present से नहीं।
Watch out
Form Traps
Wrong Module: template-driven के लिए FormsModule, reactive के लिए ReactiveFormsModule; ग़लत वाला form break करता है।
Errors बहुत जल्दी दिखाना: touched/dirty भी invalid के साथ check कीजिए, ताकि आप user के type करने से पहले nag न करें।
एक Form पर दोनों Styles Mix करना: per form एक approach पिक कीजिए।
बिना formControlName के Reactive Form: template में हर input को इसके control name से bind कीजिए।
Submit पर form.valid Ignore करना: process करने से पहले validity check कीजिए, inputs को blindly trust न कीजिए (server-side validation भी matter करता है)।
Theory
Forms हो गए; अब Server से Connect कीजिए
FestConnect का Angular front-end अब data display, format, और collect कर सकता है। आख़िरी piece इसे BACK-END से connect करना है, Unit 1 का MongoDB-backed API, actually events load और save करने के लिए। Final Angular lesson practice में services और dependency injection cover करता है: REST APIs call करने के लिए HttpClient इस्तेमाल करना और responses को Observables और RxJS से handle करना। यह modern stack complete करता है: NoSQL back-end से बात करता एक Angular front-end।
Summary
Key takeaways
- Angular में दो form approaches हैं: template-driven और reactive।
- Template-driven: ngModel के through HTML template में form logic; simple, कम code; FormsModule चाहिए।
- Reactive: FormGroup/FormControl के साथ TypeScript class में defined form model; powerful, testable; ReactiveFormsModule चाहिए।
- दोनों validators support करते हैं (required, minLength, email, pattern), template या class में applied।
- Form/control state (valid, invalid, touched, dirty, errors) यह drive करती है validation messages कब दिखाएँ।
- Simple forms के लिए template-driven choose कीजिए, complex या dynamic वालों के लिए reactive।
- Memory hook: template-driven = HTML में logic, reactive = class में model।