对输入字段同时使用value和ngModel不起作用

Question

这个概念是关于用户配置文件的。我想使用input的[value]属性从api中分配一个值(userData.email_id(，并且在更改后，我想使用ngModel将数据返回到email_id属性中。

在这里，我无法使用[value]为输入赋值。建议我解决方案。

注意：此处userData.email_id来自服务器。

TS:

email_id: string;

html:

<mat-form-field>
<input
type="text"
placeholder="Email"
matInput
[(ngModel)]="email_id"
[value]="userData.email_id"
name="uEmail"                     
/>
</mat-form-field>

Answer 1

您可以直接使用[(ngModel)]并将该值设置为该值，然后通过ngModelChange获得更改，如下所示，因此删除[value]

<mat-form-field>
<input
type="text"
placeholder="Email"
matInput
[(ngModel)]="userData.email_id"
(ngModelChange)="sendData(userData)"
name="uEmail"                     
/>
</mat-form-field>

编辑

如果您不想在每个字段中处理这个问题，您可以创建一个按钮，通过以下方式将所有更改发送到服务器，

<button (click)="sendData(userData)"></button>

在这种情况下，您不需要在每个输入上ngModelChange