Angular Academy · पाठ

FormArray और गतिशील फ़ील्ड

रनटाइम पर फ़ॉर्म नियंत्रण जोड़ें और हटाएँ

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

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

गतिशील फ़ील्ड समूह

कुछ फ़ॉर्म में फ़ील्ड की संख्या बदलती रहती है, जैसे फ़ोन नंबर या पंक्ति-मदों की सूची। FormArray कंट्रोल के क्रमबद्ध और बढ़ाए जा सकने वाले संग्रह को संभालता है।

FormArray बनाना

FormArray कंट्रोल या समूहों की एक सरणी रखता है।

const phones = new FormArray([
  new FormControl(''),
  new FormControl('')
]);

FormGroup के भीतर

सरणी को पैरेंट समूह में शामिल कीजिए, ताकि वह पूरे फ़ॉर्म के मान का हिस्सा बन जाए।

const form = new FormGroup({
  name: new FormControl(''),
  phones: new FormArray<FormControl<string>>([])
});

कंट्रोल जोड़ना

नया कंट्रोल गतिशील रूप से अंत में जोड़ने के लिए push कॉल कीजिए।

addPhone() {
  this.phones.push(new FormControl('', { nonNullable: true }));
}

कंट्रोल हटाना

किसी विशेष कंट्रोल को हटाने के लिए removeAt(index) का उपयोग कीजिए।

removePhone(i: number) {
  this.phones.removeAt(i);
}

@for से रेंडर करना

टेम्पलेट में सरणी के कंट्रोल पर पुनरावृत्ति कीजिए और प्रत्येक को formControlName के साथ उसके इंडेक्स से बाँधिए।

<div formArrayName="phones">
  @for (ctrl of phones.controls; track $index) {
    <input [formControlName]="$index" />
  }
</div>

formArrayName डायरेक्टिव

formArrayName टेम्पलेट ब्लॉक को सरणी से जोड़ता है, और भीतर का formControlName संख्यात्मक इंडेक्स का उपयोग करता है।

समूहों की सरणियाँ

अधिक विस्तृत आइटम के लिए सरणी में FormGroup रखें, जैसे प्रत्येक संपर्क में नाम और नंबर रखना।

const contacts = new FormArray<FormGroup>([]);
contacts.push(new FormGroup({
  label: new FormControl(''),
  number: new FormControl('')
}));

समूह के आइटम रेंडर करना

सरणी में प्रत्येक समूह के लिए इंडेक्स के साथ formGroupName का उपयोग कीजिए।

@for (g of contacts.controls; track $index) {
  <div [formGroupName]="$index">
    <input formControlName="label" />
    <input formControlName="number" />
  </div>
}

मान पढ़ना

सरणी का मान एक साधारण सरणी होता है, जो क्रम में वर्तमान कंट्रोल को दर्शाता है।

const list = this.phones.value; // string[]

सरणी खाली करना

गतिशील भाग को रीसेट करते समय clear() सभी कंट्रोल को एक साथ हटाने के लिए उपयोगी है।

this.phones.clear();

त्वरित जाँच

FormArray की अपनी समझ जाँचिए।

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

पुनरावलोकन

आपने सीखा कि FormArray कंट्रोल या समूहों के गतिशील, क्रमबद्ध संग्रह को संभालता है और इसके लिए push, removeAt और clear का उपयोग किया जाता है। इसे formArrayName के साथ इंडेक्स वाले formControlName/formGroupName से रेंडर किया जाता है।

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

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

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

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

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

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

क्या “FormArray और गतिशील फ़ील्ड” पाठ निःशुल्क है?

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

“FormArray और गतिशील फ़ील्ड” में मैं क्या सीखूँगा?

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

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

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

“FormArray और गतिशील फ़ील्ड” पाठ पूरा करने में कितना समय लगता है?

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

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

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

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

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