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

Question

I am using Angular 6. My form has a formArray to which I Add Items on a button click. My form looks like

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 code

<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>

Autocomplete on fileds itemName and itemService is not working. I am not able to apply filter to these fields. I am open to suggestions even if I am able to achieve this by changing some functionality of the form. Here is the part of the application Stackblitz

Answer 1

You need to relate each control inside the FormArray to its own filteredOrderItems array. I answered a similar question here , please read the answer details and take a look at stackblitz reproduction.

please feel free to ask. Thanks

Answer 2

@Mukul Jaggi you can install angular animation

I have create a demo on Stackblitz . I hope this will help/guide to you/others.

npm install --save @angular/animations@6.0.5