2017-04-17 78 views
1

结合关于数据绑定,就可以实现它(财产和事件绑定),其中$事件表示值由以下数据与角2 ngmodelChange

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

进入那么是什么将在下面的意思?

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

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

点是如果我删除ngModel括号如下,超过指定的字符数仍可以输入。

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

感谢您的解释。

阿什利

+0

'[(ngModel)]'是双向模型绑定父/子都改变值'[ngModel]'这是属性的绑定只有父母可以在你的情况BTW改变这种 –

+0

你不需要ngModelChange它会始终执行输入完成后,你应该停止它当用户按下这里的关键是你的情况下解决http://plnkr.co/edit/Ubr0HpbTrlKiWwGiq4RW?p=preview –

回答

0

首先你可以输入元素,为什么需要功能的maxlength="8"属性实现你的任务是什么?

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

,在这里它仅限于您可以添加其他输入数字小键盘与输入

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

+0

输入元素的类型编号没有maxlength属性。它仅存在于文本中。我选择使用这种方式,因为在android键按下事件不起作用。同样在你的闯入者中,你不需要手动启动变更检测。 – ashley

0

您可以使用正常的属性和事件对你的输入元件结合得到你想要的行为。

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

其中checkLengthOfInput检查输入有多长,并设置username相应的(对于例如,不更新username如果输入过长)

ngModel增加了一些异步行为在后台处理模板驱动的形式有时会导致不直观的行为。很多时候,你并不需要像你所想的那样使用ngModel(除非你真的在处理模板驱动的表单)

0

你不需要使用(ngModelChange),因为这个事件只会执行更改操作并且您需要限制唯一的长度。

[ngModel]是双向绑定属性,将更新数据,所以maxlength属性将解决您的问题。

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

enter image description here

+0

类型编号的输入元素不具有maxlength属性。 – ashley

+0

但是如果你想制作一个只接受上面数字的自定义文件,它是 –

+0

@ashley plz通过这个链接,这可能会帮助你。 http://stackoverflow.com/questions/18510845/maxlength-ignored-for-input-type-number-in-chrome/18510925#18510925 –