Angular Material UI - автозаполнение, чтобы изначально сохранить существующее значение поля формы

Question

Я использую функцию Reactive Forms из Angular Material UI для отображения некоторых существующих данных. В этом наборе данных у меня есть поле формы «страна», которое заполняется значением при загрузке страницы. С этим все в порядке.

<mat-form-field class="app-table-full-width">
    <input matInput formControlName="country" placeholder="Country" value="{{ dealer.country }}">
</mat-form-field>

Я хотел бы реализовать функцию автозаполнения в поле "страна", однако я не могу сохранить существующее значение "Страна", в котором отображается пустое поле.

Это изменения, которые я сделал;

<mat-form-field class="app-table-full-width">
  <input
    type="text"
    matInput
    formControlName="country"
    placeholder="Country"
    [matAutocomplete]="auto"
    >
  <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayCountry">
    <mat-option *ngFor="let option of filteredCountryOptions | async" [value]="option">
      {{ option.name }}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

Добавление кода компонента;

countryList: Array<ICountry> = [];
filteredCountryOptions: Observable<ICountry[]>;

ngOnInit() {
...
  this.filteredCountryOptions = this.dealerForm.valueChanges
    .pipe(
      startWith(''),
      map(value => typeof value === 'string' ? value : value.name),
      map(name => name ? this._filter(name) : this.countryList.slice())
    );
}

displayCountry(subject): string {
  return subject ? subject.name : '';
}