Question

我使用了angular material（“ @ angular / material”：“ 7.1.0”）自动完成组件，然后我使用了窗体控件而不是ng模型，现在的问题是，我无法获得自动完成组件加载时的change事件。当时我想根据自动完成值的更改调用一种方法，将值设置为ngOnInint方法上的自动完成组件。

我已经在stackblitz上创建了一个代码，这里是链接：https://stackblitz.com/edit/angular-xmnmpy

请帮助我。

Answer 1

您必须在optionSelected上使用<mat-autocomplete #auto="matAutocomplete" (optionSelected)="onSelectionChange($event)" >事件

Example on 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>

在您的ts中：

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

希望我能帮助您，如果您需要帮助，也可以随时问我！

Answer 2

首先，您根本没有使用ngOnInit。

第二，ngModelChange不适用于反应式。

您将必须像这样聆听价值变化：

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

这是一种通过反应形式来听取价值变化的标准方法。

这是您的StackBlitz。

加载零件时不调用角材料自动完成更改事件？

2 个答案: