Angular Material - mat-autocomplete not populating in ArrayForm

Question

It is a complex form so please bear with me and I will try to answer all your doubts to get it working.
I am trying to implement mat-autocomplete for my form which has formArray and formGroup. I have autocomplete in 2 places outside the formarray and inside the formarray.
For the autocomplete outside the formarray I have successfully implemented the feature but for the autocomplete inside the formarray I have issues.
I get the below error when I reload the page and no data is loaded inside the autocomplete component. [![error][1]][1]

<div formArrayName="rawmaterialwh">
                <div [formGroupName]="i" *ngFor="let product of products.controls; let i=index">
                   <legend>{{i+1}}</legend>           
                      <div fxLayout="column">
                        <div fxLayout="row wrap" fxLayoutAlign="space-between center">
                           <div fxFlex.gt-sm="49" fxFlex.gt-xs="49" fxFlex="100" fxFlex.gt-md="49">
                              <mat-form-field attr.for="{{'rawmaterialid' + i}}"  class="full-wid mrgn-b-lg">
                                 <mat-label>{{'Raw Material'|translate}}</mat-label>
                                 <input type="text" matInput formControlName="rawmaterialid" [matAutocomplete]="rawMaterialAutocomplete" />
                                 <mat-autocomplete autoActiveFirstOption #rawMaterialAutocomplete="matAutocomplete"
                                    [displayWith]="showRawMaterialName.bind(this)" (selectionChange)="onProductValueChange($event,i)">
                                    <mat-option disabled selected hidden>{{'Raw Material'|translate}}</mat-option>
                                    <mat-option *ngFor="let product_mode of filteredRawMaterial  | async" [value]="product_mode.rawmaterialid">{{product_mode.name}}</mat-option>
                                 </mat-autocomplete>
                                 <mat-error *ngIf="products.controls[i].get('rawmaterialid').hasError('required')"> {{'Select Raw Material'|translate}} </mat-error>
                              </mat-form-field>



                              <!-- <mat-form-field  attr.for="{{'rawmaterialid' + i}}"  class="full-wid mrgn-b-lg">
                                 <mat-label>{{'Raw Material'|translate}}</mat-label>
                                  <mat-select formControlName="rawmaterialid" (selectionChange)="onProductValueChange($event,i)">
                                     <mat-option disabled selected hidden>{{'Raw Material'|translate}}</mat-option>
                                     <mat-option *ngFor="let product_mode of productOption"
                                        [value]="product_mode.rawmaterialid">{{product_mode.name}}</mat-option>
                                  </mat-select>
                                  <mat-error *ngIf="products.controls[i].get('rawmaterialid').hasError('required')"> {{'Select Raw Material'|translate}} </mat-error>
                               </mat-form-field> -->
                           </div>

Component code


 ngOnInit(): void {

this.filteredRawMaterial = this.form.controls.rawmaterialwh.get('rawmaterialid').valueChanges
      .pipe(
        tap(value => console.log('value in tap ', value)),
        startWith(''),
        map(value => this._filterRawMaterial(value))
      );

}  
[![form][2]][2]


  [1]: https://i.sstatic.net/Gw3Wf.gif
  [2]: https://i.sstatic.net/ZhoTN.gif

Are you sure you're using FormArray? There's no formArrayName in your template and formControlName should be bound to i — lbsn
– lbsn, Commented Aug 10, 2021 at 9:21
weird for some reason the FormArray line was not showing, now it is showing my the code — ZAJ
– ZAJ, Commented Aug 10, 2021 at 14:29
Sorry, I cant' get the structure of your form from the template. What's rawmaterialid? And why are you looping through products.controls if your FormArray is called rawmaterialwh? Would you share the code where you're initializing the form? — lbsn
– lbsn, Commented Aug 10, 2021 at 14:51
That I use to get the formArray for validation error get products(): FormArray { return this.form.get('rawmaterialwh') as FormArray; } — ZAJ
– ZAJ, Commented Aug 10, 2021 at 15:02

Eliseo · Accepted Answer · 2021-08-11 08:30:54Z

1

from my comment about this SO, if we need know the index, as we create the formGroup and subscribe in a function, we can use the "index". Is like this another SO.

You can, e.g. pass the "index" to the function "search_Products" or use pipe.tap when add the group

addProductGroup(index) {
    ...
    this.productList$[index] = group.get("product_name").valueChanges.pipe(
      tap(_=>this.index=index),  //<--store in a variable "index" the index of
                                 //   the autocomplete we are changed
      debounceTime(300),
                                 //or pass to the function search_Products
      switchMap(value => this.productService.search_Products(value,index))
    );
}

answered Aug 11, 2021 at 8:30

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular Material - mat-autocomplete not populating in ArrayForm

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related