How to add Angular Material auto complete in FormArray

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

Lots of important code is missing - getControls(), orderItems, how onAddItem() is triggered... It would be best if you created a working stackblitz example for us to work with, and post all of the relevant code. — G. Tranter, Aug 17 '18 at 20:03

score 9 · Accepted Answer · edited Jun 20 '20 at 09:12

9

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Aug 18 '18 at 20:15

Furqan S. Mahmoud

1,417
2
13
26

Thank a lot, this is exactly what I wanted. – Mukul Jaggi Aug 19 '18 at 15:29
you are welcome, I'm happy this is the first time someone marks my answer as correct ^_^ – Furqan S. Mahmoud Aug 20 '18 at 13:48

score 0 · Answer 2 · answered Aug 18 '18 at 06:42

0

@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

answered Aug 18 '18 at 06:42

Krishna Rathore

9,389
5
24
48

Thank you, but my main problem is that I am not able to apply filter to the itemName and service inputs – Mukul Jaggi Aug 18 '18 at 12:52

How to add Angular Material auto complete in FormArray

2 Answers2