显示了Angular ngModel值，但为空

Question

将显示

ngModel的值。但是它仍然是空的，因为validate检测到它是空的。 当我添加一个空格并在该值之后时，它可以工作。

获取名称的代码

<div (click)="getName(item.name)"></div>
<input matInput [(ngModel)]="data.name" value="{{name}}">

Component.ts

name: string;
data: Data

getName(nm) {
 this.name = nm;
}

Answer 1

我认为这已经足够

<input matInput [(ngModel)]="name">

您不应同时使用[(ngModel)]和value属性。由于[]中的[(ngModel)]已经定义了输入的值。因此，您可以使用(ngModel)和value / [value] / [(ngModel)]

Answer 2

绑定到ngModel的data.name是什么？

我认为您不需要使用value属性 将name组件变量绑定到ngModel，如下所示

<div (click)="getName('hello')">Click</div>

<input matInput [(ngModel)]="name"> {{name}}

在您的组件中，

name: string;

getName(nm) {
 this.name = nm;
}

点击单击按钮，您将看到输入的值为'hello'

Answer 3

[（ngModel）]从anguler 7中删除，更好地使用了formcontrall https://next.angular.io/api/forms/FormControlName#use-with-ngmodel