Событие автозаполнения углового материала не вызывается при загрузке компонента?

Question

Я использовал автозаполнение компонента angular material ("@ angular / material": "7.1.0"), а затем я использовал управление формой вместо модели ng, теперь проблема в том, что я не могу получить автозаполнениеизменить событие при загрузке компонента.Мне было задано значение для компонента автозаполнения в методе ngOnInint, в этот раз я хочу вызвать один метод на основе изменений значения автозаполнения.

Я создал код на stackblitz, вот ссылка:https://stackblitz.com/edit/angular-xmnmpy

, пожалуйста, помогите мне в этом.

Answer 1

Ну, во-первых, вы вообще не используете ngOnInit.

Во-вторых, ngModelChange не работает с реактивными формами.

Вам придется слушатьоценивать изменения следующим образом:

this.myGroup
    .get('identifier').valueChanges.subscribe(value => console.log('Value changes'));

Это стандартный способ прослушивания изменений значений с помощью реактивных форм.

Вот ваш StackBlitz .

Answer 2

Вы должны использовать optionSelected событие для <mat-autocomplete #auto="matAutocomplete" (optionSelected)="onSelectionChange($event)" >

Пример для StackBlitz

Вы должны использовать в html:

<form [formGroup]="myGroup">
<mat-form-field>
    <input type="text"
          matInput
          [matAutocomplete]="auto"
          formControlName="identifier">
    <mat-autocomplete #auto="matAutocomplete" (optionSelected)="onSelectionChange($event)" >
      <mat-option *ngFor="let animal of animals"
            [value]="animal.name">
        {{animal.name}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

И в твоем тс:

  onSelectionChange(event){
    console.log('onSelectionChange called', event.option.value);
  }

Надеюсь, я тебе помог, и если тебе понадобится помощь, будь свободен, спроси меня!