Mat autocomplete not working with data binding

Question

I try to use from Angular Material in my angular 8 app. What I am trying to do is:

1. When something is typed in the mat-input, make an Ajax call to retrieve a list of departments.
2. Display the list of departments in the autocomplete and display department name.
3. When the user changes the selection call a function.

All works fine, except that I am not able to get the data binding ( ngModel ) to work. So the user selected value is not displayed in the input, and also on page load, the saved values are not displayed. Here is my code:

                             <input name="designation" type="text" class="form-control matInputDesignation"
                                    matInput [formControl]="myControl" [(ngModel)]="topManagement.age"
                                    [matAutocomplete]="auto" required>
                                <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete"
                                    [displayWith]="displayFn"
                                    (optionSelected)='setDesignationName($event.option.value)'>
                                    <mat-option *ngFor="let designation of filteredOptions | async"
                                        [value]="designation.id">
                                        {{designation.designationName}}
                                    </mat-option>
                                </mat-autocomplete>

this.filteredOptions = this.myControl.valueChanges.pipe(
  startWith(''),
  debounceTime(300),
  switchMap(value => {
    if (value !== '' && value.length >= 3) {
      return this._search(value);
    } else {
      return of(null);
    }
  })
);

setDesignationName(opt) {
this.topManagement.designation = opt;

}

Answer 1

You shouldn't be trying to use both [formControl] and ngModel, that could be one of the issues.