फॉर्मग्रुप बनाम फॉर्मअरे का उपयोग कब करें?

Question 1

एक FormGroup प्रत्येक बच्चे के मूल्यों को एक नियंत्रण में रखता है, कुंजी के रूप में प्रत्येक नियंत्रण नाम के साथ।

const form = new FormGroup({
  first: new FormControl('Nancy', Validators.minLength(2)),
  last: new FormControl('Drew')
});

फॉर्मअरे :

एक FormArray एक सरणी में प्रत्येक बच्चे FormControl के मूल्यों को एकत्र करता है।

const arr = new FormArray([
  new FormControl('Nancy', Validators.minLength(2)),
  new FormControl('Drew')
]);

एक दूसरे पर कब इस्तेमाल किया जाना चाहिए?

Question 2

FormArray, FormGroup का एक प्रकार है। मुख्य अंतर यह है कि इसका डेटा एक सरणी के रूप में क्रमबद्ध हो जाता है (फॉर्मग्रुप के मामले में ऑब्जेक्ट के रूप में क्रमबद्ध होने के विपरीत)। यह विशेष रूप से उपयोगी हो सकता है जब आप नहीं जानते कि गतिशील रूपों की तरह, समूह के भीतर कितने नियंत्रण मौजूद होंगे।

मुझे एक त्वरित उदाहरण द्वारा समझाने की कोशिश करते हैं। कहते हैं, आपके पास एक फॉर्म है जहां आप पिज्जा के लिए ग्राहक के ऑर्डर पर कब्जा करते हैं। और आप किसी विशेष अनुरोध को जोड़ने और हटाने के लिए एक बटन रखते हैं। यहाँ घटक का HTML भाग है:

<section>
  <p>Any special requests?</p>
  <ul formArrayName="specialRequests">
    <li *ngFor="let item of orderForm.controls.specialRequests.controls; let i = index">
      <input type="text" formControlName="{{i}}">
      <button type="button" title="Remove Request" (click)="onRemoveSpecialRequest(i)">Remove</button>
    </li>
  </ul>
  <button type="button" (click)="onAddSpecialRequest()">
    Add a Request
  </button>
</section>

स्निपेट का विस्तार करें

और यहाँ विशेष अनुरोध को परिभाषित करने और संभालने का घटक वर्ग है:

constructor () {
  this.orderForm = new FormGroup({
    firstName: new FormControl('Nancy', Validators.minLength(2)),
    lastName: new FormControl('Drew'),
    specialRequests: new FormArray([
      new FormControl(null)
    ])
  });
}

onSubmitForm () {
  console.log(this.orderForm.value);
}

onAddSpecialRequest () {
  this.orderForm.controls
  .specialRequests.push(new FormControl(null));
}

onRemoveSpecialRequest (index) {
  this.orderForm.controls['specialRequests'].removeAt(index);
}

स्निपेट का विस्तार करें

FormArray फॉर्मग्रुप की तुलना में अधिक लचीलापन प्रदान करता है इस अर्थ में कि FormGroup के "addControl", "removeControl", "setValue" आदि का उपयोग करने की तुलना में "पुश", "इन्सर्ट" और "removeAt" का उपयोग करके FormControl को हेरफेर करना अधिक आसान है। FormArray तरीके नियंत्रण सुनिश्चित करते हैं। ठीक से पदानुक्रम में ट्रैक किया गया।

उम्मीद है की यह मदद करेगा।

Question 3

प्रतिक्रियात्मक रूपों को बनाने के लिए, एक माता-पिता FormGroupका होना आवश्यक है। इसमें FormGroupआगे formControlsबच्चे formGroupsया बच्चे शामिल हो सकते हैंformArray

FormArrayआगे formControlsया formGroupखुद की सरणी हो सकती है।

हमें फॉर्मअरे का उपयोग कब करना चाहिए?

कृपया इस सुंदर पोस्ट को पढ़ें जिसमें इसके उपयोग के बारे में बताया गया हैformArray

उस ब्लॉग में दिलचस्प उदाहरण यात्राओं के बारे में है formGroup

formGroupउपयोग करने वाली यात्राओं की संरचना formControlऔर formArrayकुछ इस तरह दिखाई देगी:

this.tripForm = this.fb.group({
    name: [name, Validators.required],
     cities: new FormArray(
       [0] ---> new FormGroup({
           name: new FormControl('', Validators.required),
               places: new FormArray(
                  [0]--> new FormGroup({
                      name: new FormControl('', Validators.required),
                         }),
                      [1]--> new FormGroup({
                         name: new FormControl('', Validators.required),
                      })
                  )
              }), 
       [1] ---> new FormGroup({
           name: new FormControl('', Validators.required),
           places: new FormArray(
               [0]--> new FormGroup({
                   name: new FormControl('', Validators.required),
               }),
               [1]--> new FormGroup({
                   name: new FormControl('', Validators.required),
               })
               )
      }))
})

इस के साथ खेलने के लिए मत भूलना डेमो , और के लिए सरणी के उपयोग नोटिस citiesऔर placesएक यात्रा की।

Question 4

से: एंटोन मोइसेव बुक "टाइपस्क्रिप्ट के साथ कोणीय विकास, दूसरा संस्करण।" :

जब आप की जरूरत प्रोग्राम के रूप में (हटाना होगा या) जोड़ने के नियंत्रण एक करने के लिए प्रपत्र का उपयोग करें, FormArray । यह फॉर्मग्रुप के समान है लेकिन इसकी लंबाई चर है । जबकि फ़ॉर्मग्रुप एक पूरे फॉर्म या फॉर्म के फ़ील्ड्स के एक निश्चित सबसेट का प्रतिनिधित्व करता है , फॉर्मअरे आमतौर पर फॉर्म नियंत्रणों के संग्रह का प्रतिनिधित्व करता है जो विकसित या सिकुड़ सकते हैं ।

उदाहरण के लिए, आप उपयोगकर्ताओं की मनमानी संख्या दर्ज करने की अनुमति देने के लिए FormArray का उपयोग कर सकते हैं ।

Question 5

कोणीय प्रलेखन से आप यह देख सकते हैं

FormArray किसी भी अनाम नियंत्रण की संख्या के प्रबंधन के लिए FormGroup का एक विकल्प है। प्रपत्र समूह उदाहरणों के साथ, आप प्रपत्र सरणी उदाहरणों से नियंत्रणों को गतिशील रूप से सम्मिलित और हटा सकते हैं, और प्रपत्र सरणी आवृत्ति मान और सत्यापन स्थिति की गणना उसके बच्चे नियंत्रणों से की जाती है। हालाँकि, आपको नाम से प्रत्येक नियंत्रण के लिए एक कुंजी को परिभाषित करने की आवश्यकता नहीं है, इसलिए यदि आप पहले से बच्चे के मूल्यों की संख्या नहीं जानते हैं तो यह एक बढ़िया विकल्प है।

मैं आपको उनका उदाहरण दिखाता हूं और यह समझाने की कोशिश करता हूं कि मैं इसे कैसे समझता हूं। आप यहां स्रोत देख सकते हैं

कल्पना कीजिए कि एक विच के पास निम्नलिखित क्षेत्र हैं

  profileForm = this.fb.group({
    firstName: ['', Validators.required],
    lastName: [''],
    address: this.fb.group({
      street: [''],
      city: [''],
      state: [''],
      zip: ['']
    }),
    aliases: this.fb.array([
      this.fb.control('')
    ])
  });

यहाँ हम है firstName, lastName, addressऔर aliasesसभी एक साथ क्षेत्र प्रपत्र समूह रहे हैं तो हम में सब कुछ लपेटो group। उसी समय addressएक उपसमूह की तरह होता है इसलिए हम इसे दूसरे में लपेटते हैं group(आप बेहतर समझ के लिए टेम्पलेट को देख सकते हैं)! यहां हर फॉर्म कंट्रोल keyको छोड़कर झिझक होती है aliasesऔर इसका मतलब है कि आप इसे उन मूल्यों में पुश कर सकते हैं जितना आप चाहते हैं कि सरल ऐरे की formBuilderतरह तरीकों का उपयोग कर push।

यह है कि मैं इसे कैसे समझता हूं, आशा है कि यह किसी की मदद करेगा।