Angular Academy · पाठ

FormBuilder पैटर्न

FormBuilder से जटिल फ़ॉर्म बनाएँ

पाठ 4, कुल 4 में से13 चरण

FormBuilder पैटर्न, CoddyKit पर Angular Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Angular Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Angular Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

कम दोहराव वाला कोड

FormBuilder एक सेवा है, जो संक्षिप्त सिंटैक्स से फ़ॉर्म समूह, कंट्रोल और सरणियाँ बनाती है। इससे बार-बार new FormControl(...) कॉल लिखने से बचा जा सकता है।

FormBuilder का इंजेक्शन

इसे अपने कंपोनेंट में इंजेक्ट कीजिए।

private fb = inject(FormBuilder);

समूह बनाना

fb.group नामों को प्रारंभिक मानों से जोड़ने वाली ऑब्जेक्ट लेता है, जिसमें वैलिडेटर वैकल्पिक रूप से दिए जा सकते हैं।

form = this.fb.group({
  email: ['', Validators.required],
  age: [0]
});

मान और वैलिडेटर ट्यूपल

प्रत्येक प्रविष्टि एक ट्यूपल हो सकती है: [initialValue, syncValidators, asyncValidators]।

password: ['', [Validators.required, Validators.minLength(8)]]

नल-रहित बिल्डर

fb.nonNullable ऐसे कंट्रोल बनाता है जो कभी null नहीं होते। इसलिए रीसेट करने पर वे null के बजाय प्रारंभिक मान पर लौटते हैं।

form = this.fb.nonNullable.group({
  name: '',
  active: true
});

nonNullable क्यों महत्वपूर्ण है

nonNullable के साथ मान के प्रकार से | null हट जाता है और reset() मूल डिफ़ॉल्ट मान पुनर्स्थापित करता है, जो आमतौर पर आपकी आवश्यकता होती है।

सरणियाँ बनाना

fb.array एक FormArray बनाता है। समूहों की सरणियों के लिए इसे fb.group के साथ मिलाइए।

form = this.fb.group({
  items: this.fb.array([])
});

सरणी के आइटम के लिए सहायक

फ़ैक्टरी विधि सरणी के आइटम बनाने की प्रक्रिया को एकसमान रखती है।

newItem() {
  return this.fb.group({
    label: [''],
    qty: [1]
  });
}

आइटम जोड़ना

बनाए गए समूह को सरणी में push कीजिए।

get items() {
  return this.form.controls.items as FormArray;
}
add() { this.items.push(this.newItem()); }

स्पष्ट कंट्रोल कॉन्फ़िगरेशन

किसी एकल कंट्रोल पर nonNullable लगाने के लिए ट्यूपल के बजाय विकल्पों वाली ऑब्जेक्ट दीजिए।

token: this.fb.control('', { nonNullable: true })

FormBuilder का उपयोग कब करें

बड़े फ़ॉर्म में पठनीयता के लिए FormBuilder का उपयोग कीजिए। स्पष्ट new FormControl एपीआई समतुल्य है और कभी-कभी एकल उपयोग वाले कंट्रोल के लिए अधिक स्पष्ट होता है।

त्वरित जाँच

FormBuilder पैटर्न की अपनी समझ जाँचिए।

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन

आपने सीखा कि FormBuilder (fb.group, fb.control, fb.array) दोहराव वाले कोड को कम करता है, ट्यूपल में मान और वैलिडेटर रखे जाते हैं, और fb.nonNullable ऐसे नल-रहित कंट्रोल देता है जिनका रीसेट डिफ़ॉल्ट मानों पर लौटता है।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 38
पाठ: 144

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “FormBuilder पैटर्न” पाठ निःशुल्क है?

हाँ — Angular Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “FormBuilder पैटर्न” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Angular Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“FormBuilder पैटर्न” में मैं क्या सीखूँगा?

FormBuilder से जटिल फ़ॉर्म बनाएँ आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Angular Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Angular Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Angular Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“FormBuilder पैटर्न” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Angular Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Angular Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Angular Academy पर वापस जाएँ