title: Angular mat autocomplete does not working in FormArray?
body: <p>I'm trying to implement mat autocomplete in FormArray. I followed this link but my console have a lot of errors when I try to open link when put this code like example from below:</p>
  <p><a href="https://stackblitz.com/edit/angular-szxkme-yfphur?file=app%2Fautocomplete-display-example.ts" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-szxkme-yfphur?file=app%2Fautocomplete-display-example.ts</a></p>
  <p><strong>create-project.ts</strong></p>
  <pre><code>export class CreateProjectComponent implements OnInit {
  pageNavigation: IPageNavigation = {
      pageTitle: 'Project Management',
      subPages: [{ label: 'Projects', link: '/projects' }],
  };
  
  createProjectForm: FormGroup;
  projectTeamMemberFormArray = new FormArray([]);      
  filteredEmployees: Observable&lt;IEmployee[]&gt;;
  
  constructor(       
      private formBuilder: FormBuilder,
      private projectManagementService: ProjectManagementService       
  ) { }
  
  ngOnInit(): void {       
      this.buildForm();
  }
  
  buildForm(): void {
      this.createProjectForm = this.formBuilder.group({            
          projectTeamMembers: this.projectTeamMemberFormArray
      });
  }
  
  manageNameControl(index: number) {
      var arrayControl = this.createProjectForm.get('projectTeamMembers') as FormArray;
      this.filteredEmployees[index] = arrayControl.at(index).get('firstName').valueChanges
          .pipe(
              startWith&lt;string | IEmployee&gt;(''),
              map(value =&gt; typeof value === 'string' ? value : value.firstName),
              map(name =&gt; name ? this.projectManagementService.filterEmployees(name) : null)
          );
  }
  
  addProjectTeamMember(teamMember?: IProjectMember): void {
      this.projectTeamMemberFormArray = this.createProjectForm.get('projectTeamMembers') as FormArray;
      this.projectTeamMemberFormArray.push(this.createProjectTeamMemberItem(teamMember));
  
      this.manageNameControl(this.projectTeamMemberFormArray.length - 1);
  }
  
  createProjectTeamMemberItem(teamMember?: IProjectMember): FormGroup {
      return this.formBuilder.group({
          employeeId: new FormControl((teamMember &amp;&amp; teamMember.employeeId) || null, Validators.required),
          firstName: new FormControl((teamMember &amp;&amp; teamMember.firstName) || null, Validators.required),
          memberRoles: new FormControl((teamMember &amp;&amp; teamMember.projectRoles) || null, Validators.required),
      });
  }
  
  removeProjectTeamMemberItem(index: number, item: IProjectMember) {
      this.projectTeamMemberFormArray = this.createProjectForm.get('projectTeamMembers') as FormArray;
      this.projectTeamMemberFormArray.removeAt(index);
      this.projectTeamMembers.forEach((c: IProjectMember) =&gt; {
          if (c.id === item.id) c.deleted = true;
      });
    }
  selectEmployee(employee: IEmployee): void {
      this.createProjectForm.get('employeeId').setValue(employee.id);
  }
  
  employeeTypeaheadDisplayFn(employee: IEmployee): string {
      if (employee) {
          return `${employee.lastName} ${employee.firstName}`;
      }
      return '';
  }
  }
  </code></pre>
  <p><strong>create-project.html</strong></p>
  <pre><code>  &lt;form #f=&quot;ngForm&quot; (ngSubmit)=&quot;submit()&quot; novalidate  [formGroup]=&quot;createProjectForm&quot;&gt;
      &lt;section&gt;
          &lt;div formArrayName=&quot;projectTeamMembers&quot; class=&quot;single-item-container&quot;
              *ngFor=&quot;let t of createProjectForm.get('projectTeamMembers').controls; let j = index&quot;&gt;
              &lt;ng-container [formGroupName]=&quot;j&quot;&gt;
              &lt;div class=&quot;spinner&quot; *ngIf=&quot;showLoader&quot;&gt;
                  &lt;mat-progress-spinner [color]=&quot;'primary'&quot; diameter=&quot;100&quot; mode=&quot;indeterminate&quot; value=&quot;50&quot;&gt;
                  &lt;/mat-progress-spinner&gt;
              &lt;/div&gt;
              &lt;div [formGroupName]=&quot;j&quot; *ngIf=&quot;!showLoader&quot; fxLayout=&quot;row&quot; fxLayoutGap=&quot;2%&quot;&gt;
                  &lt;!-- employee --&gt;
                  &lt;mat-form-field fxFlex=&quot;100%&quot;&gt;
                      &lt;input matInput formControlName='firstName' placeholder=&quot;Start typing employee first or last name.&quot;
                          [matAutocomplete]=&quot;auto&quot;&gt;
                      &lt;mat-error *ngIf=&quot;t.get('firstName').errors?.required&quot;&gt;
                          {{ 'FIELD_REQUIRED_MESSAGE' | translate }}
                      &lt;/mat-error&gt;
                  &lt;/mat-form-field&gt;
                  &lt;mat-autocomplete #auto=&quot;matAutocomplete&quot; [displayWith]=&quot;employeeTypeaheadDisplayFn&quot; (optionSelected)=&quot;selectEmployee($event.option.value.id)&quot;&gt;
                      &lt;mat-option *ngFor=&quot;let employee of filteredEmployees[j] | async&quot; [value]=&quot;employee&quot;&gt;
                          {{ employee.firstName }} {{ employee.lastName }}
                      &lt;/mat-option&gt;
                  &lt;/mat-autocomplete&gt;
                  &lt;div class=&quot;input-bottom&quot;&gt;
                      &lt;button mat-raised-button color=&quot;warn&quot; (click)=&quot;removeProjectTeamMemberItem(j, t.value)&quot;&gt;
                          Delete
                      &lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/ng-container&gt;
          &lt;/div&gt;
          &lt;div class=&quot;form-footer&quot;&gt;
              &lt;div class=&quot;items-buttons&quot;&gt;
                  &lt;button mat-raised-button color=&quot;primary&quot; type=&quot;button&quot;
                      (click)=&quot;addProjectTeamMember()&quot;&gt;{{'COMPONENTS.PROJECT.ADD_NEW_TEAM_MEMBER' | translate}}&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  &lt;/form&gt;
  </code></pre>
  <p><strong>project-management.service.ts</strong></p>
  <pre><code>export interface IEmployee {
  id: number;
  firstName: string;
  lastName: string;
  }
     filterEmployees(searchTerm: string): Observable&lt;IEmployee[]&gt; {
      const reqUrl = `${environment.mPortalWebApi}employee-profiles/search?searchTerm=${searchTerm}`;
  
      return this.http.get(reqUrl).pipe(
          map((response: IEmployee[]) =&gt; response),
          catchError((error) =&gt; _throw(error)),
      );
  }
  </code></pre>
  <p>I would appreciate it if someone would look at the code and see what I missed. Thanks.</p>
  <p><a href="https://i.stack.imgur.com/cI6nH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cI6nH.png" alt="enter image description here" /></a></p>
  <p><strong>EDIT</strong></p>
  <p>After your suggestions @polyglot some errors disappeared just there issue with async pipe and ngFor for this array like in picture below and there is error manageNameControl for this.filteredEmployees[index].</p>
  <p><em><strong>Type 'Observable&lt;Observable&lt;IEmployee[]&gt;&gt;' is not assignable to type 'Observable'.
  Type 'Observable&lt;IEmployee[]&gt;' is missing the following properties from type 'IEmployee': id, firstName,</strong></em></p>
  <p><a href="https://i.stack.imgur.com/Gs7o5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Gs7o5.png" alt="enter image description here" /></a></p>