Question

我想动态地将表单元素添加为表单上的键/值对。为此，我制作了一个formbuilder数组，然后遍历一个对象，并将其键和值添加到form数组。现在，我正在尝试引用它们，但似乎无法解决。引用这些的最佳方法是什么？

用于构建表单的代码：

this.individualForm = this.fb.group(
  newI);
  this.attrArr = this.fb.array([]);
  this.individualForm.addControl('attrArr',this.attrArr);
  Object.keys(this.attr).forEach((key)=>{
    console.log(key);
    console.log(this.attr[key]);
    this.attrArr.push(this.fb.group({//form group
      key:[key],//first form element
      value:[this.attr[key]]
    }))
  });
  console.log(this.individualForm);

用于迭代表单数组的代码：

<div formArrayName="attrArr">
     <div *ngFor="let fg of attrArr.controls; let i=index">
           {{i}} 
           {{attrArr.controls[i].controls['key']}}
           <input type="text" [formControlName]="attrArr.controls[i].controls['key']">

       </div>
 </div>

Answer 1

我认为您需要formGroupName。你可以尝试：

<div formArrayName="attrArr">
     <div *ngFor="let fg of attrArr.controls; let i=index" [formGroupName]="i">
           {{i}} 
           {{attrArr.controls[i].controls['key']}}
           <input type="text" [formControlName]="attrArr.controls[i].controls['key']">
       </div>
 </div>

Answer 2

网络，当您使用“动态”形式工作时。您需要考虑到有两个对象：formControl本身和生成formControl的对象。

还有，我想您不想创建一个FormArray，而只是创建一个formGroup。就是说，假设您的对象就像

{"name":"Peter","surname":"Smith"}

我想你想要得到类似的东西

 myForm=new FormGroup({
     name:new FormControl('Peter'),
     surname:new FormControl('Smith'),
 })

所以

  //I want have an array with the names of the fields, called fields
  this.individualForm = new FormGroup(); //declare as FormGroup
  this.fields=[]; //iitialize the array

  Object.keys(this.attr).forEach((key)=>{
    this.individualForm.addControl(key,new FormControl(this.attr[key])
    this.field.push(key);
  }

然后，我们可以遍历“字段”

<div [formGroup]="individualForm ">
     <div *ngFor="let fg of fields; let i=index">
           {{i}}.-{{fg}} 
           <input type="text" [formControlName]="fg">
       </div>
 </div>

看到我创建了一个空的FormGroup，并使用addControl添加了一个控件。我在遍历键时将“控件名称”添加到数组中，但是您可以使用管道键在对象上使用* ngFor，而忘记创建此“辅助”数组

如何在Angular中按2引用表单元素？

2 个答案: