Question

我的Angular应用出现问题。我正在尝试创建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]}}。控制台显示“错误错误：找不到具有未指定名称属性的控件”。

这是我用来渲染FormGroups的代码：

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

由于某些原因，Stackblitz不适用于我的项目，但是源代码在这里：https://stackblitz.com/github/kulaska/Table-app/tree/adding_forms_branch

我不明白为什么在与按钮或输入元素进行交互后会呈现数据。它以某种方式触发了新FormGroup的创建。显然，我需要在不与DOM交互的情况下同时创建所有对象。有人遇到过同样的问题吗？我该怎么解决？非常感谢您的帮助

Answer 1

您最好的选择是使用FormBuilder。

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-fields/

角度表单组：找不到具有未指定名称属性的控件

1 个答案: