Javascript 使用Angular 4 Form Group编辑和添加新数据

我正试图用Angular 4 FormGroup和FormBuilder的最佳方式来解决这个问题。我现在正在处理一些伪json数据，例如：

bins = [ 
 {
   id: '101-Test',
   system: 'test-system',
   shape: 'round'
 },
   id: '102-Test',
   system: 'test-system',
   shape: 'round'
]

我打算做的是有一个UI，它将显示可以编辑的“箱子”行，而且还能够添加一个新的箱子。因此

html/ngFor/ngIf的
如下所示：

<div id="bins">
   <div class=bin-card new" *ngIf="addBinCardVisible">
      <form [formGroup]="binSetupForm">
          <label>Bin # <input type="text" formControlName="id"></label>
          <label>Bin # <input type="text" formControlName="system"></label>
          <label>Bin # <input type="text" formControlName="shape"></label>
      </form>
   </div>
   <div class="bin-card-wrap" *ngFor="let bin of bins; let i = index">
      <form [formGroup]="binSetupForm">
         <label>Bin # <input type="text" formControlName="id"></label>
          <label>Bin # <input type="text" formControlName="system"></label>
          <label>Bin # <input type="text" formControlName="shape"></label>
      </form>
   </div>
</div>

如您所见，我正在使用Angular Form Builder构建binSetupForm的值，然后将新的表单值推送到我的虚拟数据数组中。如何使用此表单组/控件设置
*ngFor
中编辑表单的值。我是否应该从角度实现patchValue？如果是，如何实现？缺少有关如何对此窗体的所有实例使用这些窗体控件的链接。非常感谢您的帮助。
您希望使用的是FormArray，您将按此方式设置表单

this.binsForm = new FormGroup({
    bins: new FormArray([
        new FormGroup({
            id: new FormControl('101-Test'),
            system: new FormControl('test-system'),
            shape: new FormControl('round')
        }),
        new FormGroup({
            id: new FormControl('102-Test'),
            system: new FormControl('test-system'),
            shape: new FormControl('round')
        })
    ]
});

在*.component.html文件中

<div [formGroup]="binsForm">
    <div formArrayName="bins">
      <div *ngFor="let bin of bins; let i = index">
        <div [formGroupName]="i">
            <input type="text" formControlName="id" />
            <input type="text" formControlName="system" />
            <input type="text" formControlName="shape" />
        </div>
      </div>
    </div>
</div>



这里有一个链接到a
感谢您的回复，我的实际数据中将有大约500个条目，那么如何根据数据设置这些控件，而不是每次都传递数据呢？您看过完整的链接示例了吗。唯一的问题是为什么addBin（）函数只将一个空对象推送到bins数组，而不是存储表单组实例中的值？addBin创建一个新的bin并将其推送到数组中，如果要保存更新后的数组，只需调用this.binsForm.value，我已经更新了链接中的代码以向您展示。我传递了一个空对象，因为
createBin
函数会像so
bin.id | |“
@那样检查每个属性，看起来很不错。我想问一个问题：假设客户删除任何字段中的输入数据并单击保存。如何显示错误以向他们表明他们必须用一些pattern.validations填充空表单？
<div [formGroup]="binsForm">
    <div formArrayName="bins">
      <div *ngFor="let bin of bins; let i = index">
        <div [formGroupName]="i">
            <input type="text" formControlName="id" />
            <input type="text" formControlName="system" />
            <input type="text" formControlName="shape" />
        </div>
      </div>
    </div>
</div>