angular - mat-autocomplete inside Array in Reactive form

Question

I am trying to implement matAutocomplete inside an Array in a reactive form.

What is the correct way to do it? I have tried the following but cannot iterate correctly.

See stackblitz: https://stackblitz.com/edit/angular-ivy-ao3kdn?file=src/app/app.component.ts

component.ts

formDoyle: FormGroup;
options: string[] = ['One', 'Two', 'Three'];
filteredOptions: Observable<string[]>;

constructor( private fb: FormBuilder ) { }

ngOnInit(): void {

this.formDoyle = this.fb.group({
  calculos: this.fb.array([
    this.getCalculo()
  ]),
});

  const control = this.formDoyle.get('calculos') as FormArray;

  for (let i in control) {
    this.filteredOptions = control.at(+i).get('option')?.valueChanges
    .pipe(
      startWith(''),
      map(value => this._filter(value))
    );
  }

}

private _filter(value: string): string[] {
 const filterValue = value.toLowerCase();

 return this.options.filter(option => option.toLowerCase().includes(filterValue));
}

question from:https://stackoverflow.com/questions/66051091/mat-autocomplete-inside-array-in-reactive-form

Answer 1

Waitting for answers