2016-09-30 8 views
6

Angular2プロジェクトでは、いくつかの入力を検証する必要があります。 入力値が整数かどうかを簡単に確認するにはどうすればよいですか?角2のカスタムバリデーター:入力値が整数かどうかを確認しますか?

空のフィールドには0を返すNumber(control.value)を使用しようとしました。

または-DIS考慮スペースparseInt(control.value,10):1つのスペース0,24 = 1 ,024それは1を返します - エラーなしでバリデータを渡します。

を私はのようなものを持っている場合。入力値が文字列ではない数であるため、予想される-which _.isInteger(control.value)又は_.isNumeric(control.value) // return false every time:様

Lodash機能します。

このような方法を組み合わせると、多くのif/elseステートメントが混乱した関数が作成されます。その場合でも、すべてのエッジケースを取得するかどうかはわかりません。間違いなくもっと真直ぐなアプローチが必要です。何か案は?

答えて

4

これは私がこれまでに見つかったクリーンな方法です:

app.component.html:

<input formControlName="myNumber"> 

app.component.ts:

export class AppComponent { 
    myNumber:FormControl 

    constructor(private _ValidatorsService: ValidatorsService){ 
    } 

    this.myNumber= new FormControl('defaultValue', 
     [ Validators.required, this._ValidatorsService.isInteger ]); 
} 

バリ.service.ts:

function check_if_is_integer(value){ 
    if((parseFloat(value) == parseInt(value)) && !isNaN(value)){ 
     // I can have spacespacespace1 - which is 1 and validators pases but 
     // spacespacespace doesn't - which is what i wanted. 
     // 1space2 doesn't pass - good 
     // of course, when saving data you do another parseInt. 
     return true; 
    } else { 
     return false; 
    } 
} 

@Injectable() 
export class ValidatorsService { 

    public isInteger = (control:FormControl) => { 
     return check_if_is_integer(control.value) ? null : { 
      notNumeric: true 
     } 
    } 

} 

お楽しみください!

+0

の入力で動作します、それは{IsNumeric関数を返すべきではありません:true}検証に失敗したら? – DSoa

+0

@ DSoaおそらくあなたは正しいです。私を修正してくれてありがとう。私の角度のスキルは少し錆びました。私は今エルムを使用しています。答えを更新しました。:) – AIon

+2

'if(condition){return true; } else {return false; } '? :)あなたは 'return(condition);'を意味しませんでしたか? –

1

だけのカスタムバリデータを作成します。

import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms'; 

export function integer(): ValidatorFn { 
    return (control: AbstractControl): ValidationErrors | null => { 
    const error: ValidationErrors = { integer: true }; 

    if (control.value && control.value !== `${parseInt(control.value, 10)}`) { 
     control.setErrors(error); 
     return error; 
    } 

    control.setErrors(null); 
    return null; 
    }; 
} 

その後、フォームにそれを使用する:

import { integer } from '...'; 

form.get('yourControl').setValidators([integer()]); 

これも型テキスト