1

Regarding data binding, it is possible to achieve it (property and event binding) where $event represent the value being entered by the below

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

But then what would the below mean?

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

Why am i asking this question is because i need to set a maxlength of characters for an input element of type number. Please refer to this plunker http://plnkr.co/edit/5oHCzelp5z2M2GQWLgg9?p=preview

Point is if I remove the brackets from ngModel as below, more than the specified number of characters can still be entered.

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

Thanks for an explanation.

Ashley

snorkpete
  • 14,278
  • 3
  • 40
  • 57
ashley
  • 1,008
  • 17
  • 37
  • `[(ngModel)]` is two way model binding parent/child both change the value `[ngModel]` it is property binding only parent can change this – Babar Hussain Apr 17 '17 at 12:57
  • btw in your case you don't need a ngModelChange it will always excute after the input is done you should stop it when user pressed the key here is your case solve http://plnkr.co/edit/Ubr0HpbTrlKiWwGiq4RW?p=preview – Babar Hussain Apr 17 '17 at 13:02

3 Answers3

0

First of all you can achieve your task with maxlength="8" attribute of input element so why need functions ?

In your case you don't need a (ngModelChange) to limit the input it will only trigger when the model is updated you can restrict user before he is done with any change on your model you can achieve this by (keypress) event. I've edited your example found here http://plnkr.co/edit/Ubr0HpbTrlKiWwGiq4RW?p=preview.

and here it is restricted only to input numbers you can add another with numpad inputs

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

Babar Hussain
  • 2,917
  • 1
  • 17
  • 14
  • input element of type number does not have maxlength attribute. it exist for text only. I chose to use this way because in android key press event does not work. Also in your plunker, you do not need to launch the change detection manually. – ashley Apr 17 '17 at 14:25
0

You can use normal property and event binding against your input element to get the behaviour you want.

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

where checkLengthOfInput checks how long the input is, and sets username accordingly (for eg. does not update username if the input is too long)

ngModel adds some async behaviour in the background to handle template-driven forms that can lead to unintuitive behaviour sometimes. A lot of times, you don't actually need ngModel as much as you think you do (unless you're actually dealing with a template-driven form)

snorkpete
  • 14,278
  • 3
  • 40
  • 57
0

You don't need to use (ngModelChange) as this event will only execute on change action and you need to restrict the only length.

[ngModel] is two way binding property and that will update the data, so maxlength property will resolve your issue.

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

enter image description here

Amol Bhor
  • 2,322
  • 1
  • 12
  • 14