Angular 2 ngmodelChange 的数据绑定答案

【问题标题】：data binding with angular 2 ngmodelChangeAngular 2 ngmodelChange 的数据绑定
【发布时间】：2017-09-13 02:13:22
【问题描述】：

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

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

那么下面是什么意思呢？

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

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

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

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

感谢您的解释。

阿什利

【问题讨论】：

[(ngModel)] 是双向模型绑定父/子都改变值[ngModel] 这是属性绑定只有父可以改变这个
顺便说一句，在您的情况下，您不需要 ngModelChange 它会在输入完成后始终执行您应该在用户按下键时停止它这是您的情况解决plnkr.co/edit/Ubr0HpbTrlKiWwGiq4RW?p=preview

标签： angular ionic-framework ionic2 angular2-template

【解决方案1】：

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

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

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

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

【讨论】：

类型 number 的输入元素没有 maxlength 属性。它仅存在于文本中。我选择使用这种方式是因为在 android 按键事件中不起作用。同样在您的 plunker 中，您无需手动启动更改检测。

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

类型 number 的输入元素没有 maxlength 属性。
但是如果你想制作一个只接受上面数字的自定义是
@ashley 请通过此链接，这可能会对您有所帮助。 stackoverflow.com/questions/18510845/…