Angular mat-autocomplete not filtering values when i use formcontrolname instead [formcontrol]

Question

I have implemented mat-autocomplete in my code (as implemented in the link ) and it works perfectly well without any issues.

But I need to change [formcontrol] to formcontrolname so that input box will be binded with values populated from DB and saved back to DB while saving.

When i use formcontrolname, everything works well, except the search/filtering values. Could some one help me in fixing the search/filter issues while using formcontrolname.

Answer 1

I suppose your problem is that you're trying to subscribe to valueChanges before create the form, you need make it after. eg

ngOnInit() {
    //create the form
    this.myForm=new FormGroup({
       control:new FormControl()
    })
    //after subscribe to valueChanges
    this.filteredOptions = this.myForm.get('control').valueChanges
      .pipe(
        startWith(''),
        map(value => this._filter(value))
      );
  }

Answer 2

I have made a component for autocomplete and use it wherever in my project. autocomplete.component.html:

<mat-form-field class="example-full-width">
    <mat-label> {{label}}</mat-label>
    <input type="text" aria-label="Number" matInput  [matAutocomplete]="auto"  
    [formControl]="myControl">
    <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
        <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
            {{option.Text}}
        </mat-option>
    </mat-autocomplete>
</mat-form-field>

autocomplete.component.ts

export class AutocompleteComponent implements OnInit {
  filteredOptions: Observable<SelectedListItem[]>;
  @Output() public onChange: EventEmitter<any> = new EventEmitter();
  @Input() public label: string = "Select";
  @Input() public options: any[];
  @Input() public mycontrol: FormControl;
  myControl = new FormControl();
  constructor() { }
  ngOnInit() {
    this.filteredOptions = this.myControl.valueChanges
      .pipe(
        startWith(''),
        map(value => {
          if (value.length > 2) {
            return this._filter(value);
          } else {
            return null;
          }
        })
      );
  }
  displayFn(item: SelectedListItem) {
    try { return item.Text; }
    catch{ }
  }
  private _filter(value: string): any[] {
    var result = this.options.filter(option => 
    option.Text.toLowerCase().includes(value.toLowerCase()));
    this.onChange.emit(result);
    return result;
  }
}

Now you can use autocomplete in any component:

<app-autocomplete (onChange)="getFilterOptions($event,'Numbers')" formControlName="Numbers" [options]="options" [label]=" 'Select'"  ngDefaultControl>
</app-autocomplete>

and component.ts:

 getFilterOptions(options, controlName) {
    this.myForm.get(controlName).reset(options);
  }