以角度反应形式动态添加和删除表中的行，控制台错误

Question

动态创建和删除表中的行。

问题：

1. 出现控制台错误：“错误：找不到名称为‘vilats’的控件”
2. 在输入框中添加一些值后，可以使用按钮添加和删除。

用于创建动态表格的 HTML 代码。

<form class="form-horizontal" [formGroup]="loanProductForm" (ngSubmit)="onSubmit()">
<table>
   <thead>
      <tr>
         <th>BP</th>
         <th>PULSE</th>
         <th>TEMP.</th>
         <th>Wt.</th>
         <th>Ht.</th>
         <th></th>
      </tr>
   </thead>
   <tbody>
      <tr [formGroupName]="i" formArrayName="vilats" *ngFor="let product of loanProductForm.get('vitals').controls; let i = index ; let last = last">
      <td>
         <input class="form-control form-control-sm" type="text" id="newAttributeBp"
            formControlName="BP" />
      </td>
      <td>
         <input class="form-control form-control-sm" type="text" id="newAttributePulse"
            formControlName="PULSE" />
      </td>
      <td>
         <input class="form-control form-control-sm" type="text" id="newAttributeTemp"
            formControlName="Temp"/>
      </td>
      <td>
         <input class="form-control form-control-sm" type="text" id="newAttributeWeight"
            formControlName="Wt"/>
      </td>
      <td>
         <input class="form-control form-control-sm" type="text" id="newAttributeHeight"
            name="newAttributeHeight" formControlName="Ht"/>
      </td>
      <td>
         <button *ngIf="last" class="btn btn-sm btn-default" type="button" (click)="addProductButtonClick()"
         title="Add New"><i class="fas fa-plus"></i></button>
         <button (click)="removeCompany(i)" *ngIf="!last" class="btn btn-sm btn-default" 
         title="Delete"><i class="fas fa-trash-alt"></i></button>
      </td>
      </tr>
   </tbody>
</table>
<input type="submit" value="Save"/>
</form>

用于初始化、添加和删除条目的组件代码。

  loanProductForm: FormGroup;
  
  ngOnInit() {
    this.loanProductForm = this._formBuilder.group({
     vitals: this._formBuilder.array([this.addProductFormGroup()])
    });
  }

  addProductFormGroup(): FormGroup {
    return this._formBuilder.group({
         entryDate: ["", Validators.required],
      BP: ["", Validators.required],
       PULSE: ["", Validators.required],
       Temp: ["", Validators.required],
       Wt: ["", Validators.required],
       Ht: ["", Validators.required]
    });
  }

  addProductButtonClick(): void {
    (<FormArray>this.loanProductForm.get("vitals")).push(
      this.addProductFormGroup()
    );
  }

在此处复制问题stackblitz

Answer 1

修复了这个问题，修改了迭代代码。

<tbody  formArrayName="vitals">
   <tr  [formGroupName]="i" *ngFor="let product of eRegForm.get('vitals').controls; let i = index ; let last = last">
   <td>
      <p-calendar type="number" class="form-control  form-control-sm" dateFormat="dd-mm-yy" container="body"
         monthNavigator="true"  yearRange="1930:2030" yearNavigator="true" showButtonBar="true"
         formControlName="entryDate">
      </p-calendar>
   </td>
   <td>
      <input class="form-control form-control-sm" type="text" formControlName="BP" />
   </td>
   <td>
      <input class="form-control form-control-sm" type="text" formControlName="PULSE" />
   </td>
   <td>
      <input class="form-control form-control-sm" type="text" formControlName="Temp"/>
   </td>
   <td>
      <input class="form-control form-control-sm" type="text" formControlName="Wt"/>
   </td>
   <td>
      <input class="form-control form-control-sm" type="text" formControlName="Ht"/>
   </td>
   <td>
      <button *ngIf="last" class="btn btn-sm btn-default" type="button" (click)="addProductButtonClick()"
      title="Add New"><i class="fas fa-plus"></i></button>
      <button (click)="removeCompany(i)" *ngIf="!last" class="btn btn-sm btn-default" 
      title="Delete"><i class="fas fa-trash-alt"></i></button>
   </td>
   <!--       
   <td>
      <input type="text" class="form-control" [id]="'price' + i" placeholder="price"  formControlName="price">
      <div *ngIf="product.get('price').errors?.required &&
         product.get('price').touched">
         price is required
      </div>
   </tr>
</tbody>

工作代码stackblitz