Question

我正在使用Angular6。我的表单有一个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)
      })
    );
  }

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">
              <mat-autocomplete #autoService="matAutocomplete">
                <mat-option *ngFor="let option of filteredOrderServices | async" [value]="option">
                  {{option}}
                </mat-option>
              </mat-autocomplete>
          </td>
          <td>
              <input class="form-control" type="text" formControlName="itemPrice" (keyup)="findTotal()">
            <!-- </mat-form-field> -->
          </td>
          <td><button type="button" class="btn btn-danger" (click)="onDeleteIngredient(i)">Delete</button></td>
        </tr>
      </tbody>

对文件项itemName和itemService的自动完成不起作用。我无法将过滤器应用于这些字段。即使可以通过更改表单的某些功能来实现此建议，我也乐于接受建议。这是应用程序Stackblitz

的一部分

Answer 1

您需要将control中的每个FormArray与其自己的filteredOrderItems数组相关联。我回答了类似的问题here，请阅读答案的详细信息，然后看看stackblitz的复制情况。

请随时提问。谢谢

Answer 2

@Mukul Jaggi，您可以安装angular animation

我已在 Stackblitz 上创建了一个演示。我希望这会对您/其他人有所帮助/指导。

npm install --save @angular/animations@6.0.5

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

2 个答案: