2017-04-17 81 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 –