ngModelChange與輸入長度

我想設置輸入字段的整數數量的限制，就像類型爲文本時的最大長度。以下是我的模板中的代碼。ngModelChange與輸入長度

<ion-input 
     type="number" 
     placeholder="Username (required)" 
     [ngModel]="test" 
     (ngModelChange)="getLength($event)" 
     name="test"> 
    </ion-input>

在.TS，

getLength(data){ 
    if(data.length > 8){ 
     console.log(1); 
     let data1 = data.substring(0,8); 
     this.test = data1; 
     return false; 
    } 
    }

任何想法如何防止萬一按鍵時長度大於8

感謝，阿什利

來源

2017-04-05 ashley

爲什麼不使用maxlength屬性本身.. –

你好，maxlength對於類型號不存在。 – ashley

使用FormBuilder執行更多複雜的驗證，它會爲您節省大量的時間和精力。

import {FormBuilder, FormGroup} from '@angular/forms'; 

constructor(private fb: FormBuilder) {} 

public myForm: FormGroup = this.fb.group({ 
    username: ['', [Validators.required, Validators.maxLength(8)]] 
});

，然後用它喜歡：

<!-- Swap div for whatever your parent container is --> 
<div> 
    <ion-input type="number" formControlName="username"> 
</div>

然後你只需選中表格的有效性有：

this.myForm.valid

這將評估要麼true或false取決於它是否是有效的或不。

編輯：爲了增加我的回答上面，你可以使用管道：

import {Pipe, PipeTransform} from '@angular/core'; 

@Pipe({ 
    name: 'maxLength' 
}) 

export class MaxLength implements PipeTransform { 

    transform(value: string): string { 

    if (value) { 
     return value.length > 8 ? value.splice(0, 8) : value; 
    } 
    } 
}

我沒有測試過這個，所以你可能需要調整它，以便它能夠正常工作。但它應該給你一個粗略的想法。

來源

2017-04-05 17:38:49 Chrillewoodz

你好，它只會給出一個錯誤，但不會阻止用戶輸入更多數字。 – ashley

@ashley您可以編寫自己的管道，禁止輸入更多數字。 – Chrillewoodz

你有這樣的例子嗎？我知道角管主要用於轉換文本。 – ashley

ngModelChange與輸入長度

回答

相關問題