Question

我正在尝试在表单上动态添加多辆车。

目前，此代码是我与解决方案最接近的代码：

https://stackblitz.com/edit/form-group-with-formarray-adding-dyamic-row-angular-5-6

但是我只需要一个form-group，然后在输入汽车信息并按Add New时，汽车数据就会在下面的表格行中显示。

按提交表单时，插入的数据必须与示例中的相同：

{
  "details": [
    {
      "type": "Opel",
      "model": "Astra",
      "year": "2001",
      "make": null,
      "color": "red",
      "plateNumber": "10239dfc"
    },
    {
      "type": "Renault",
      "model": "Clio",
      "year": "2008",
      "make": null,
      "color": "Yellow",
      "plateNumber": "384818ccc"
    }
  ]
}

您有任何链接，文档或其他可帮助我解决此问题的方法吗？我只需要一些指导！谢谢！

Answer 1

尝试一下...在您的ts文件中

 this.yrForm= this._fb.group({

   Details: this._fb.array(
      [this.allArrayData()]
    )
  });




   allArrayData() {
      return this._fb.group({
        quantity: [''],
        percentage: ['']
      });
    };
      addNewOffer() {

  const control = <FormArray>this.myForm.controls['discount'];
  control.push(this.initlanguage());

}

现在在您的HTML文件中...

     <div formArrayName="Details">
        <div *ngFor="let language of myForm['controls'].discount['controls'] ; let i=index" class="double-input"
        [formGroupName]="i">
         <input type="text" formControlName="yrFrmCTRLname...">

         <button (click)="addNewOffer()">addd</button>
          <path
     </div>

它可能会帮助您...如果需要帮助，请告诉我

在具有反应性表单角度的表单数组中添加新行

1 个答案: