15

let's say I have the following form structure: 

  this.myForm = this.formBuilder.group({
          date: ['', [Validators.required]],
          notes: [''],
          items: this.initItems()

        });
  initItems() {
    var formArray = this.formBuilder.array([]);
    for (let i = 0; i < 2; i++) {
      formArray.push(this.formBuilder.group({
        name: ['', [Validators.required]],
        age: ['', [Validators.required]],
      }));
    }

    return formArray;
  }

and the name control supposed to be an autocomplete, how can I relate the all the name controls to an autocomplete list?

Furqan S. Mahmoud
  • 1,417
  • 2
  • 13
  • 26

1 Answers1

24

I solved this by relating each name control inside the FormArray to a filteredOption array: 

  ManageNameControl(index: number) {
    var arrayControl = this.myForm.get('items') as FormArray;
    this.filteredOptions[index] = arrayControl.at(index).get('name').valueChanges
      .pipe(
      startWith<string | User>(''),
      map(value => typeof value === 'string' ? value : value.name),
      map(name => name ? this._filter(name) : this.options.slice())
      );

  }

Then After each time I build a formgroup inside the form Array (create new item), I need to call the above function at the new index like this: 

  addNewItem() {
    const controls = <FormArray>this.myForm.controls['items'];
    let formGroup = this.formBuilder.group({
      name: ['', [Validators.required]],
      age: ['', [Validators.required]],
    });
    controls.push(formGroup);
    // Build the account Auto Complete values
    this.ManageNameControl(controls.length - 1);

  }

In the .html file, we need to refer to the desired filteredOption array, we can do this by using the i index:

  <mat-option *ngFor="let option of filteredOptions[i] | async " [value]="option">
  {{ option.name }}
  </mat-option>

please see the detailed answer here https://stackblitz.com/edit/angular-szxkme?file=app%2Fautocomplete-display-example.ts

Update: to populate the array with a default value for a specific object, you can do it using the receive forms like this:

 let formGroup = this.fb.group({
      name: [{value: { name: 'Mary' } , disabled: false}, [Validators.required]],
      age: ['', [Validators.required]],
    });

stackblitz

Furqan S. Mahmoud
  • 1,417
  • 2
  • 13
  • 26
  • Please extract the relevant parts of your [code](https://stackblitz.com/angular/dedeqkdraxg?file=app/autocomplete-display-example.html) and post them here, along with this answer. –  Jul 27 '18 at 18:05
  • How to populate array field with initial value when [displayWith] enabled? – Eugene Zalivadnyi Mar 25 '20 at 07:10
  • @EugeneZalivadnyi I updated the question to handle your case. – Furqan S. Mahmoud Mar 26 '20 at 08:49
  • This answer seems to keep coming up when I google this task however, how could I implement this when using a service to call a rest API as opposed to a locally stored list? – eddyizm Oct 30 '20 at 21:58
  • @FurqanS.Mahmoud are you able to help with this: https://stackoverflow.com/questions/68169715/mat-autocomplete-error-when-using-formarray – Flash Jun 29 '21 at 16:39