数据绑定与角度2 ngmodelChange

Question

关于数据绑定，可以实现它（属性和事件绑定），其中$ event表示由下面输入的值

<input [ngModel]="username" (ngModelChange)="change($event)">

但接下来会是什么意思？

<input [(ngModel)]="username" (ngModelChange)="change($event)">

为什么我问这个问题是因为我需要为number类型的输入元素设置最大字符长度。请参阅此plunker http://plnkr.co/edit/5oHCzelp5z2M2GQWLgg9?p=preview

如果我从ngModel中删除括号，如下所示，仍然可以输入超过指定数量的字符。

<input [ngModel]="username" (ngModelChange)="change($event)">

感谢您的解释。

阿什利

Answer 1

首先，您可以使用input元素的maxlength="8"属性来完成任务，那么为什么需要函数呢？

在您的情况下，您不需要(ngModelChange)来限制输入，它只会在模型更新时触发，您可以在完成对模型的任何更改之前限制用户，您可以通过{实现此目的{1}}事件。我已经在http://plnkr.co/edit/Ubr0HpbTrlKiWwGiq4RW?p=preview编辑了您的示例。

此处仅限于输入数字，您可以使用小键盘输入添加另一个

http://plnkr.co/edit/DkB8aE5MJ5ZXcXQOfl9h?p=preview

Answer 2

您可以对输入元素使用普通属性和事件绑定来获得所需的行为。

 <input [value]="username" (input)="checkLengthOfInput($event.target.value)">

其中checkLengthOfInput检查输入的时间长度，并相应地设置username（例如，如果输入太长，则不会更新username）

ngModel在后台添加了一些异步行为来处理模板驱动的表单，这些表单有时会导致不直观的行为。很多时候，你实际上并不像你想象的那样需要ngModel（除非你实际上是在处理模板驱动的形式）

Answer 3

您不需要使用(ngModelChange)，因为此事件只会在更改操作时执行，您需要限制唯一的长度。

[ngModel]是双向绑定属性，它将更新数据，因此maxlength属性将解决您的问题。

<ion-input [(ngModel)]="field" maxlength="8"></ion-input>