ngModelChange with input length

Question

入力フィールドの整数の数に制限を設定したいのは、typeがtextの場合のmaxlengthと同じです。以下は私のテンプレートのコードです。 .TSで

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

、

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

長さは複数を実行するように8より大きい

おかげで、 アシュリー

Answer 1

使用FormBuilderあるときにイベントキー入力を防ぐために、どのように任意のアイデア複雑なバリデーションは、時間と労力を大幅に節約します。その後、

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

constructor(private fb: FormBuilder) {} 

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

など、それを使用します。

それが有効なのかどうかに応じて、 trueまたは falseのいずれかに評価されます

this.myForm.valid 

：次に、あなただけで、フォームの有効性を確認

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

か否か。

EDIT：あなたはパイプを使用することができ、上記の私の答えに追加するには：

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; 
    } 
    } 
} 

あなたはそれが正しく動作するためには、それを微調整する必要がある場合がありますので、私はこれをテストしていません。しかし、それはあなたに大まかなアイデアを与えるはずです。