Угловой дизайн материала не может получить значение из текстового поля

Question

У меня есть текстовое поле, в котором я пытаюсь прочитать значение, когда оно изменяется. После того, как я изменяю поле (удаляя символы), я продолжаю получать неопределенное значение, хотя событие происходит как и ожидалось. Что я тут не так делаю?

Результат кода ниже:

changed: {"isTrusted":true} undefined

Вид:

....
<ng-container matColumnDef="email">
    <mat-header-cell *matHeaderCellDef> Email </mat-header-cell>
    <mat-cell *matCellDef="let e">
        <mat-form-field floatLabel="never">
            <input matInput placeholder="no email" (change)="emailUpdated($event)" [value]="e.email" [(ngModel)]="e.email">
        </mat-form-field>
    </mat-cell>
</ng-container>
....

в моем компоненте:

emailUpdated(event) {
    console.log('changed: '+JSON.stringify(event)+' '+event.email);
}

Answer 1

Вы можете получить обновленное значение в обработчике события change с помощью event.target.value:

<input [(ngModel)]="e.email" (change)="emailUpdated($event)" ... >

emailUpdated(event) {
  console.log("New email", event.target.value);
}

Вы также можете просто использовать e.email, поскольку он связан с элементом ввода с помощью [(ngModel)]:

emailUpdated() {
  console.log("New email", this.e.email);
}

<Ч />

В качестве альтернативы, если вы хотите получать уведомления об изменении значения (при каждом нажатии клавиши), обработайте событие ngModelChange:

<input [(ngModel)]="e.email" (ngModelChange)="emailUpdated($event)" ... >

В этом случае параметр $event является обновленным значением:

emailUpdated(value) {
  console.log("New email", value);
}

<Ч />

Примечание: вам не нужно связывать [value], так как вы используете двухстороннее связывание данных.