如何使用 Angular 将 ngModel 应用于输入字段

Question

大家好，我是 Angular 的新人，据我所知，ngModel 是双向绑定的，对吧？所以如果我有 2 个输入框，我可以将一个绑定到另一个吗，所以当我在上面输入内容时其中一个同时更新第一个？

        <form >
    <div>
    <input type="text" [(ngModel)]="test" id="test1" >
    <input type="text" id="test" ">
    </div>
    </form>

我想当我在第二个输入框上写一些东西时，id 是“test”，第一个显示它

Answer 1

当然可以。只需在输入中使用相同的 ngModel。像这样：

<input type="text" [(ngModel)]="test" id="test1" >
<input type="text" [(ngModel)]="test" id="test2" >

Answer 2

尽管 Tony Marko 已经回答了您的问题。我想补充几个细节。首先，ngModel 可以在不同的情况下使用。例如

第一。在输入

上初始化 FormControl 实例

// Creates FormControl with a name firstName and template ref firstName
// So FormControl props can be used in your template
// for example *ngIf="firstName.valid"
<input ngModel name="firstName" #firstName="ngModel">

第二。一种方式值绑定

// Value of the input changes as soon as IMMUTABLE component property changes
<input [ngModel]="firstName" name="firstName">

第三。双向绑定

// The same as before but also changes property on input change
<input [(ngModel)]="firstName" name="firstName">

第四。分开的双向绑定

// Its 100% identical as previous, but event emitter is separated
// Which allows you to do side action onModelChange event
<input [ngModel]="firstName" (ngModelChange)="firstName = $event" name="firstName">

我希望它能澄清你的答案

如何使用 Angular 将 ngModel 应用于输入字段

how to apply ngModel to an input field using Angular

ngmodel

angular