小编Muk*_*ggi的帖子

如何在 FormArray 中添加 Angular Material 自动完成

我正在使用 Angular 6。我的表单有一个formArray我在单击按钮时添加项目的表单。我的表格看起来像

private initForm() {
  this.orderForm = new FormGroup({
    'orderItems': this.orderItems,
    'customerContact': new FormControl(null),
    'totalAmount': new FormControl(null)
  });
}

onAddItem() {
  (<FormArray>this.orderForm.get('orderItems')).push(
    new FormGroup({
      'itemName': new FormControl(null, Validators.required),
      'itemService': new FormControl(null, Validators.required),
      'itemPrice': new FormControl(null)
    })
  );
}
Run Code Online (Sandbox Code Playgroud)

html代码

<tbody formArrayName="orderItems">
  <tr *ngFor="let orderItem of getControls(); let i = index" [formGroupName]="i">
    <td>
      <input type="text" formControlName="itemName" class="form-control" [matAutocomplete]="autoName">
      <mat-autocomplete #autoName="matAutocomplete">
        <mat-option *ngFor="let option of filteredOrderItems | async" [value]="option">
          {{option}}
        </mat-option>
      </mat-autocomplete>
    </td>
    <td>
      <input type="text" formControlName="itemService" class="form-control" [matAutocomplete]="autoService"> …
Run Code Online (Sandbox Code Playgroud)

angular-material angular angular-forms

5
推荐指数
1
解决办法
2831
查看次数

标签 统计

angular ×1

angular-forms ×1

angular-material ×1