title: How to use AutoComplete inside ngFor form
body: <p>I'm using <code>Angular Material AutoComplete</code> module and I've made it work when using with a simple input. But I really want to use it inside a <code>ngFor</code> inside a module.</p>
  
  <p>I've managed to make it almost work, but I can't make it filter the options. This is my html:</p>
  
  <pre><code>&lt;form novalidate [formGroup]="productForm" (ngSubmit)="onSubmit()"&gt;
    &lt;mat-card&gt;
      &lt;mat-card-content&gt;
        &lt;mat-form-field&gt;
          &lt;input type="text" matInput [matDatepicker]="picker" formControlName="data" required&gt;
  
          &lt;mat-datepicker-toggle matSuffix [for]="picker"&gt;&lt;/mat-datepicker-toggle&gt;
          &lt;mat-datepicker #picker&gt;&lt;/mat-datepicker&gt;
        &lt;/mat-form-field&gt;
  
        &lt;mat-divider&gt;&lt;/mat-divider&gt;
  
        &lt;!-- Product --&gt;
        &lt;div formArrayName="products"&gt;
          &lt;div *ngFor="let item of productForm.get('products').controls; let i = index"&gt;
            &lt;div [formGroupName]="i"&gt;
              &lt;mat-form-field&gt;
                &lt;input type="text" placeholder="product" matInput formControlName="product" [matAutocomplete]="product" required&gt;
                &lt;mat-autocomplete #product="matAutocomplete" [displayWith]="displayFn"&gt;
                  &lt;mat-option *ngFor="let option of filterProduct | async" [value]="option"&gt;
                    {{option.nome}}
                  &lt;/mat-option&gt;
                &lt;/mat-autocomplete&gt;
              &lt;/mat-form-field&gt;
  
              &lt;mat-divider&gt;&lt;/mat-divider&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;button mat-raised-button color="primary" [disabled]="productForm.disabled" type="button" (click)="newProduct()"&gt;New Product&lt;/button&gt;
      &lt;/mat-card-content&gt;
  
      &lt;mat-card-actions&gt;
        &lt;button mat-raised-button color="primary" [disabled]="productForm.disabled"&gt;Add&lt;/button&gt;
      &lt;/mat-card-actions&gt;
    &lt;/mat-card&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>And the component:</p>
  
  <pre><code>public products: any;
  public productForm: FormGroup;
  public filterProduct: Observable&lt;any&gt;;
  
  constructor(
      private _store: StoreService,
  ) {
      this.products = this._store.insumo;
  }
  
  ngOnInit() {
      this.productForm = new FormGroup({
      data: new FormControl(new Date(), Validators.required),
      products: new FormArray([]),
      });
  
      this.newProduct();
  
      this.filterProduct= this.productForm.get('product').valueChanges
      .pipe(
          startWith(''),
          map(value =&gt; typeof value === 'string' ? value : value.nome),
          map(nome =&gt; nome ? this._filterProduct(nome) : this.insumos.slice())
      );
  }
  
  private _filterProduct(nome: string) {
      const _filterValue = nome.toLowerCase();
  
      return this.products.filter(option =&gt; option.nome.toLowerCase().includes(_filterValue));
  }
  
  public displayFn(object): string | undefined {
      return object ? object.nome : undefined;
  }
  
  public newProduct():void {
      const control = &lt;FormArray&gt;this.productForm.get('products');
  
      control.push(new FormGroup({
      product: new FormControl(null, Validators.required),
      }));
  }
  
  public onSubmit() {
      console.log(this.productForm);
  }
  </code></pre>
  
  <p>I believe the problem is with the function <code>filterProduct</code>, because I need to get the input value, since it's inside a <code>ngFor</code> I don't know how to do it.</p>