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]。

角材料设计无法从文本字段中获得价值

1 个答案: