title: Mat-Autocomplete formControlName
body: <p>I have issue using formControlName on Mat-Autocomplete.
  i dont know why but my formControlName wont send the data, am i put it wrong?
  When i try to remove [formControl] from HTML, its always cant filter.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;form [formGroup]="form" #legalDataFrm="ngForm" autocomplete="off" fxLayout.gt-sm="column" fxFlex="1 1 auto" novalidate&gt;
    &lt;input type="text" placeholder="Pilih Bank" 
      formControlName="bankName" matInput 
      [formControl]="myControl" [matAutocomplete]="auto"&gt;
      &lt;mat-autocomplete 
      #auto="matAutocomplete" 
      (optionSelected)='onChangeBank()' 
      [displayWith]="displayFn"&gt;
        &lt;mat-option&gt;Pilih Bank&lt;/mat-option&gt;
        &lt;mat-option *ngFor="let option of filteredOptions | async" [value]="option"&gt;
          {{option.bankName}}
        &lt;/mat-option&gt;
      &lt;/mat-autocomplete&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>TS
  _bankService is where i get the Bank List, _validationService is where i get the validation for each form name.</p>
  
  <pre><code>export class FpLegalDataFormComponent implements OnInit, OnDestroy {
  form: FormGroup;
  myControl = new FormControl();
  options: User[];
  filteredOptions: Observable&lt;User[]&gt;;
  
  constructor(
  private activatedRoute: ActivatedRoute,
  private formBuilder: FormBuilder,
  public _validationsService: ValidationsService,
  public _bankService: BankService
  ) {
  }
   this.form = this.formBuilder.group({
    bankName      : [bankName, Validators.required]
  });
  displayFn(user?: User): string | undefined {
  return user ? user.bankName : undefined;
  }
  
  private _filter(name: string): User[] {
  const filterValue = name.toLowerCase();
  
   return this.options.filter(option =&gt; 
   option.bankName.toLowerCase().indexOf(filterValue) &gt; -1);
   }
   private initDropdown() {
   this._bankService.getBank().then((response) =&gt; {
     console.log(response.data.bankList)
     this.options = response.data.bankList;
     console.log(this.options)
     this.filteredOptions = this.myControl.valueChanges
     .pipe(
       startWith&lt;string | User&gt;(''),
       map(value =&gt; typeof value === 'string' ? value : value.bankName),
       map(name =&gt; name ? this._filter(name) : this.options.slice())
     );
   })
  }
  </code></pre>