कोणीय 2 एक सूत्र से सभी वस्तुओं को हटा दें

Question 1

मेरे पास एक फ़ॉर्मबिल्डर के अंदर एक फॉर्म ऐरे है और मैं गतिशील रूप से फॉर्म बदल रहा हूं, यानी एप्लिकेशन 1 से क्लिक लोड डेटा पर।

मेरे पास जो समस्या है, वह यह है कि सभी डेटा लोड होते हैं, लेकिन फॉर्मर्रे में डेटा रहता है और पुराने आइटम को नए के साथ सम्‍मिलित करता है।

मैं यह कैसे स्पष्ट कर सकता हूं कि केवल नए आइटम ही हैं।

मैंने यह कोशिश की है

const control2 = <FormArray>this.registerForm.controls['other_Partners'];
        control2.setValue([]);

लेकिन यह काम नहीं करता है।

कोई विचार? धन्यवाद

nginit में

ngOnInit(): void {
this.route.params.subscribe(params => { alert(params['id']);
            if (params['id']) {
                this.id = Number.parseInt(params['id']);
            }
            else { this.id = null;}
          });
if (this.id != null && this.id != NaN) {
            alert(this.id);
            this.editApplication();
            this.getApplication(this.id);
        }
        else
        {
            this.newApplication();
        }

}

onSelect(Editedapplication: Application) {
 this.router.navigate(['/apply', Editedapplication.id]);
}

editApplication() {
      
        this.registerForm = this.formBuilder.group({
              id: null,
            type_of_proposal: ['', Validators.required],
            title: ['', [Validators.required, Validators.minLength(5)]],
            lead_teaching_fellow: ['', [Validators.required, Validators.minLength(5)]],
            description: ['', [Validators.required, Validators.minLength(5)]],
            status: '',
            userID: JSON.parse(localStorage.getItem('currentUser')).username,
            contactEmail: JSON.parse(localStorage.getItem('currentUser')).email,
            forename: JSON.parse(localStorage.getItem('currentUser')).firstname,
            surname: JSON.parse(localStorage.getItem('currentUser')).surname,
            line_manager_discussion: true,
            document_url: '',
            keywords: ['', [Validators.required, Validators.minLength(5)]],
            financial_Details: this.formBuilder.group({
                  id: null,
                buying_expertise_description: ['', [Validators.required, Validators.minLength(2)]],
                buying_expertise_cost: ['', [Validators.required]],
                buying_out_teaching_fellow_cost: ['', [Validators.required]],
                buying_out_teaching_fellow_desc: ['', [Validators.required, Validators.minLength(2)]],
                travel_desc: ['', [Validators.required, Validators.minLength(2)]],
                travel_cost: ['', [Validators.required]],
                conference_details_desc: ['', [Validators.required, Validators.minLength(2)]],
                conference_details_cost: ['', [Validators.required]],
            }),

            partners: this.formBuilder.array
                (
                [
                    //this.initEditPartner(),
                    //this.initEditPartner()
                    // this.initMultiplePartners(1)
                ]
                ),
            other_Partners: this.formBuilder.array([
                //this.initEditOther_Partners(),
            ])
           
        });
       
    }

getApplication(id)
    {
        

        this.applicationService.getAppById(id, JSON.parse(localStorage.getItem('currentUser')).username)
            .subscribe(Response => {
               
                    if (Response.json() == false) {
                        this.router.navigateByUrl('/');
                    }
                    else {
                        this.application = Response.json();  
                          for (var i = 0; i < this.application.partners.length;i++)
                          {
                                this.addPartner();
                          }
                          for (var i = 0; i < this.application.other_Partners.length; i++) {
                              this.addOther_Partner();
                          }

                          this.getDisabledStatus(Response.json().status);
                        (<FormGroup>this.registerForm)
                            .setValue(Response.json(), { onlySelf: true }); 
                      }

                }
         
        );

       
        
        

       
    }

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

nagonitit को क्लिक पर नहीं बुलाया जा रहा है

Question 2

मुझे भी यही समस्या थी। इस समस्या को हल करने के दो तरीके हैं।

सदस्यता संरक्षित करें

आप removeAt(i)फ़ंक्शन को लूप में कॉल करके प्रत्येक FormArray तत्व को मैन्युअल रूप से साफ़ कर सकते हैं ।

clearFormArray = (formArray: FormArray) => {
  while (formArray.length !== 0) {
    formArray.removeAt(0)
  }
}

इस दृष्टिकोण का लाभ यह है कि आपके पास कोई भी सदस्यता formArray, जैसे कि पंजीकृत है formArray.valueChanges, खो नहीं जाएगा।

देखें FormArray प्रलेखन अधिक जानकारी के लिए।

क्लीनर विधि (लेकिन सदस्यता संदर्भ तोड़ती है)

आप पूरे फॉर्मअरे को एक नए के साथ बदल सकते हैं।

clearFormArray = (formArray: FormArray) => {
  formArray = this.formBuilder.array([]);
}

यह दृष्टिकोण एक समस्या का कारण बनता है यदि आप formArray.valueChangesअवलोकन योग्य हैं! यदि आप FromArray को एक नए सरणी से प्रतिस्थापित करते हैं, तो आप उस अवलोकन के संदर्भ को खो देंगे जो आपने सदस्यता लिया है।

Question 3

या आप बस नियंत्रण को साफ़ कर सकते हैं

this.myForm= {
     name: new FormControl(""),
     desc: new FormControl(""),
     arr: new FormArray([])
}

कुछ जोड़ें array

const arr = <FormArray>this.myForm.controls.arr;
arr.push(new FormControl("X"));

सरणी को साफ़ करें

const arr = <FormArray>this.myForm.controls.arr;
arr.controls = [];

जब आपके पास चयनित और स्पष्ट कई विकल्प होते हैं, तो कभी-कभी यह दृश्य को अपडेट नहीं करता है। जोड़ने के लिए एक वैकल्पिक हल है

arr.removeAt(0)

अपडेट करें

प्रपत्र सरणियों का उपयोग करने के लिए एक अधिक सुरुचिपूर्ण समाधान आपकी कक्षा के शीर्ष पर एक गेट्टर का उपयोग कर रहा है और फिर आप इसे एक्सेस कर सकते हैं।

get inFormArray(): FormArray {
    this.myForm.get('inFormArray') as FormArray;
}

और इसे एक टेम्पलेट में उपयोग करने के लिए

<div *ngFor="let c of inFormArray; let i = index;" [formGroup]="i">
other tags...
</div>

रीसेट:

inFormArray.reset();

धक्का दें:

inFormArray.push(new FormGroup({}));

सूचकांक पर मूल्य निकालें: 1

inFormArray.removeAt(1);

अद्यतन 2:

आंशिक ऑब्जेक्ट प्राप्त करें, JSON और कई अन्य विशेषताओं के रूप में सभी त्रुटियां प्राप्त करें, NaoFormsModule का उपयोग करें

Question 4

कोणीय 8+ के रूप में आप उपयोग कर सकते हैं clear() फॉर्मअरे में सभी नियंत्रणों को हटाने के लिए :

const arr = new FormArray([
   new FormControl(),
   new FormControl()
]);
console.log(arr.length);  // 2

arr.clear();
console.log(arr.length);  // 0

पिछले संस्करणों के लिए अनुशंसित तरीका है:

while (arr.length) {
   arr.removeAt(0);
}

https://angular.io/api/forms/FormArray#clear

Question 5

कोणीय 8

बस clear()फ़ॉर्म पर विधि का उपयोग करें :

(this.invoiceForm.controls['other_Partners'] as FormArray).clear();

Question 6

कोणीय v4.4 यदि आपको फॉर्मअरे के उदाहरण से उसी संदर्भ को बचाने की आवश्यकता है, तो यह कोशिश करें:

purgeForm(form: FormArray) {
  while (0 !== form.length) {
    form.removeAt(0);
  }
}

Question 7

चेतावनी!

कोणीय v6.1.7 फॉर्मएरे दस्तावेज कहता है:

सरणी में नियंत्रण बदलने के लिए, फॉर्मअरे में ही पुश, इंसर्ट या रिमूव तरीकों का उपयोग करें। इन तरीकों से यह सुनिश्चित होता है कि नियंत्रण पदानुक्रम में ठीक से ट्रैक किए गए हैं। सीधे रूप में FormArray का उपयोग करने के लिए उपयोग किए जाने वाले AbstractControls के सरणी को संशोधित न करें, जिसके परिणामस्वरूप विचित्र और अप्रत्याशित व्यवहार जैसे टूटे हुए परिवर्तन का पता लगाना।

इस बात का ध्यान रखें कि यदि आप दिए गए उत्तर में से एक के रूप में spliceसीधे controlsसरणी पर फ़ंक्शन का उपयोग कर रहे हैं ।

removeAtफ़ंक्शन का उपयोग करें ।

  while (formArray.length !== 0) {
    formArray.removeAt(0)
  }

Question 8

आप आसानी से अपने सरणी के लिए एक गटर को परिभाषित कर सकते हैं और इसे निम्नानुसार साफ़ कर सकते हैं:

  formGroup: FormGroup    
  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.formGroup = this.fb.group({
      sliders: this.fb.array([])
    })
  }
  get sliderForms() {
    return this.formGroup.get('sliders') as FormArray
  }

  clearAll() {
    this.formGroup.reset()
    this.sliderForms.clear()
  }

Question 9

अपडेट: कोणीय 8 को आखिरकार ऐरे फॉर्मअरे को स्पष्ट करने की विधि मिली। क्लियर ()

Question 10

कोणीय 8 के बाद से आप this.formArray.clear()प्रपत्र सरणी में सभी मानों को खाली करने के लिए उपयोग कर सकते हैं । यह सभी तत्वों को एक-एक करके हटाने का एक सरल और अधिक कुशल विकल्प है

Question 11

FormArray में किसी सरणी के सभी तत्वों को निकालने के लिए FormArray.clear () का उपयोग करें

Question 12

बशर्ते आप जो पहले से ही उपयोग कर रहे हैं उसके साथ सरणी में जानकारी की जगह के लिए डेटा संरचना प्रदान करेगा patchValue

https://angular.io/docs/ts/latest/api/forms/index/FormArray-class.html#!#reset-anchor

पैचवैल्यू (मूल्य: कोई [], {onlySelf, emitEvent} ?: {onlySelf ?: boolean, emitEvent ?: boolean}): शून्य FormArray के मूल्य को पैच करता है। यह एक सरणी को स्वीकार करता है जो नियंत्रण की संरचना से मेल खाता है, और समूह में सही नियंत्रण के लिए मूल्यों से मेल खाने की पूरी कोशिश करेगा।

यह एरर को फेंकने के बिना एरे के सुपर-सेट और सब-सेट दोनों को स्वीकार करता है।

const arr = new FormArray([
   new FormControl(),
   new FormControl()
]);
console.log(arr.value);   // [null, null]
arr.patchValue(['Nancy']);
console.log(arr.value);   // ['Nancy', null]

वैकल्पिक रूप से आप उपयोग कर सकते हैं reset

रीसेट (मान ?: कोई भी, {onlySelf, emitEvent} ?: {onlySelf ?: boolean, emitEvent ?: boolean}): शून्य स्वरूप को रीसेट करता है। डिफ़ॉल्ट रूप से इसका मतलब है:

सरणी और सभी वंशज प्राचीन के रूप में चिह्नित किए गए हैं। सरणी और सभी वंशज अछूते हैं। सभी वंशों के मूल्य शून्य या अशक्त होंगे। आप नियंत्रण की संरचना से मेल खाने वाले राज्यों की श्रेणी में पास करके एक विशिष्ट रूप स्थिति को भी रीसेट कर सकते हैं। । राज्य एक स्टैंडअलोन मान या एक फॉर्म स्टेट ऑब्जेक्ट हो सकता है जिसमें मूल्य और अक्षम स्थिति दोनों होते हैं।

this.arr.reset(['name', 'last name']);
console.log(this.arr.value);  // ['name', 'last name']

या

this.arr.reset([   {value: 'name', disabled: true},   'last' ]);
console.log(this.arr.value);  // ['name', 'last name']
console.log(this.arr.get(0).status);  // 'DISABLED'

यहाँ प्रत्येक के एक बहुत ही सरल उपयोग प्रदर्शन मेरा कुछ पहले काम से एक कांटा Plunker डेमो है।

Question 13

मैंने कभी भी फॉर्मअरे का उपयोग करने की कोशिश नहीं की, मैंने हमेशा फॉर्मग्रुप के साथ काम किया है, और आप सभी नियंत्रणों का उपयोग करके हटा सकते हैं:

Object.keys(this.formGroup.controls).forEach(key => {
          this.formGroup.removeControl(key);
        });

फ़ॉर्मग्रुप का एक उदाहरण फ़ॉर्मग्रुप होना।

Question 14

मुझे बहुत देर हो चुकी है लेकिन मुझे कुछ और रास्ते मिले हैं जहाँ आपको लूप्स की आवश्यकता नहीं है। आप खाली करने के लिए सरणी नियंत्रण सेट करके सरणी रीसेट कर सकते हैं।

नीचे दिए गए कोड से आपकी सरणी रीसेट हो जाएगी।

this.form.setControl('name', this.fb.array([]))

Question 15

यदि लूप को सभी आइटम को हटाने में लंबा समय लगेगा यदि सरणी में 100 आइटम हैं। आप नीचे दिए गए FormArray के नियंत्रण और मूल्य दोनों गुणों को खाली कर सकते हैं।

clearFormArray = (formArray: FormArray) => {formArray.controls =>]; formArray.setValue ([]); }

Question 16

कोड को साफ रखने के लिए मैंने कोणीय 7 और नीचे का उपयोग करने वाले किसी के लिए निम्नलिखित एक्सटेंशन विधि बनाई है। इसका उपयोग रिएक्टिव फॉर्म की किसी भी अन्य कार्यक्षमता का विस्तार करने के लिए भी किया जा सकता है।

import { FormArray } from '@angular/forms';

declare module '@angular/forms/src/model' {
  interface FormArray {
    clearArray: () => FormArray;
  }
}

FormArray.prototype.clearArray = function () {
  const _self = this as FormArray;
  _self.controls = [];
  _self.setValue([]);
  _self.updateValueAndValidity();
  return _self;
}