ngModel разбивает атрибут значения в поле ввода материала

Question

Я пытаюсь создать функцию обновления в приложении Angular / Material. У меня есть эта строка здесь

<mat-form-field> <input type="text" maxlength="14" value={{user.name}} [(ngModel)]="name" name="name" matInput> </mat-form-field>

Когда я использую ngModel, атрибут значения больше не работает, но вместо этого поле ввода остается пустым. Есть ли обходной путь к этому?

Answer 1

Вы должны использовать одну или ngModel или value привязку, как это -

<mat-form-field> <input type="text" maxlength="14" [value]='user.name'  name="name" matInput> </mat-form-field>

или

<mat-form-field> <input type="text" maxlength="14" [(ngModel)]="user.name" name="name" matInput> </mat-form-field>

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

value (односторонняя привязка данных) следует использовать, когда вам нужно установить значение только этого элемента.

ngModel следует использовать в случае двусторонней привязки данных

Answer 2

Попробуйте [(ngModel)]="user.name"

Примерно так:

<input type="text" maxlength="14" [(ngModel)]="user.name" name="name" matInput> 

value={{user.name}} следует избегать.