मुझे अपने कोणीय ऐप में समस्या हो रही है। मैं 3 फॉर्म बनाने की कोशिश कर रहा हूं। यहाँ मेरा टेम्पलेट है:

<div *ngFor="let item of formNames; index as i" >
    {{formNames[i]}}
<form [formGroup]='formFields[i]'>      
  <label>          
      Name:
     <input type="text" [formControl]="formFields[i].name">
  </label>      
   <label>
  All:
  <input type="text" [formControl]="formFields[i].all">      
</label>
<label>
   Done:
  <input type="text" [formControl]="formFields[i].done">      
</label>
<label>
  Ctrl:
  <input type="text" [formControl]="formFields[i].ctrl">      
</label>
<label>
  Rjct:
  <input type="text" [formControl]="formFields[i].rjct">      
</label>
</form>
</div>

समस्या यह है कि जब पृष्ठ लोड होता है, तो यह केवल पहला {{formnames[i]}} प्रस्तुत करता है। कंसोल कहता है "त्रुटि त्रुटि: अनिर्दिष्ट नाम विशेषता के साथ नियंत्रण नहीं ढूंढ सकता"।

यहां वह कोड है जिसका उपयोग मैं फॉर्मग्रुप प्रस्तुत करने के लिए करता हूं:

export class TableDataFormComponent {
  formFields: Array<any> = fields;
  formNames = FORMINPUTS;
  say = f; 
}

let f = function() {console.log(this.formFields); };

const FORMINPUTS: Array<string> = [];

TableHeaders.HEADERS.forEach((item) => {
  FORMINPUTS.push(item);
});

let fields: Array<FormGroup> = [];

for (let i = 0; i < FORMINPUTS.length; i++) {
    fields[i] = new FormGroup({
    name: new FormControl(''),
    all: new FormControl(''),
    done: new FormControl(''),
    ctrl: new FormControl(''),
    rjct: new FormControl('')
  });
}

यहाँ समस्या का वीडियो है: https://yadi.sk/i/4GnZpJLV38oWMg

स्टैकब्लिट्ज किसी कारण से मेरे प्रोजेक्ट के लिए काम नहीं कर रहा है, लेकिन स्रोत कोड यहाँ है: https://stackblitz.com/github/kulaska/Table-app/tree/adding_forms_branch

मुझे समझ में नहीं आता कि बटन या इनपुट तत्वों के साथ बातचीत करने के बाद डेटा क्यों प्रस्तुत होता है। यह किसी भी तरह से नया फॉर्म ग्रुप बनाने को ट्रिगर करता है। जाहिर है, मुझे उन सभी को एक ही समय में बनाया जाना चाहिए, बिना डीओएम के साथ बातचीत किए। क्या किसी के पास एक ही मुद्दा था? इसे हल करने के लिए मैं क्या करूँ? मैं वास्तव में आपकी मदद की सराहना करता हूँ

2
kulaska 15 नवम्बर 2018, 23:42

1 उत्तर

सबसे बढ़िया उत्तर

फॉर्मबिल्डर का उपयोग करना आपकी सबसे अच्छी शर्त है।

this.formBuilder.array([ this.createItem() ])

createItem(): FormGroup {
  return this.formBuilder.group({
    name: '',
    all: '',
    done: '',
    ...
  });
}

और आपके टेम्पलेट को उपयोग करने की आवश्यकता होगी
formArrayName="fields" और [formGroupName]="i"

अधिक विवरण के लिए यह लेख देखें:
https://alligator.io/angular/reactive-forms-formarray-dynamic -फ़ील्ड/

3
Nadhir Falta 15 नवम्बर 2018, 20:59