web-dev-qa-db-ja.com

Angular 2カスタムバリデーター：入力値が整数かどうかを確認しますか？

Angular2プロジェクトでは、いくつかの入力を検証する必要があります。入力値が整数かどうかを簡単に確認するにはどうすればよいですか？

空のフィールドに_0_を返すNumber(control.value)を使用してみました-良くありません。

または、スペースを考慮しないparseInt(control.value,10)：

次のようなものがある場合：1スペース0,24 = _1 ,024_ 1を返します-これは、エラーなしでバリデーターを渡します。

Lodash関数は次のようになります：_.isInteger(control.value)または_.isNumeric(control.value) _// return false every time_-入力値は数値ではなく文字列であるため、これは予期されたものです。

このようなメソッドを組み合わせると、多くのif/elseステートメントを含む厄介な関数が作成されますが、それでも、すべてのEdgeケースを取得できるかどうかはわかりません。もっと率直なアプローチが絶対に必要です。何か案は？

javascriptvalidationangularuser-input
8
AIon

これは私がこれまでに見つけた最もクリーンな方法です：

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

validators.service.ts：

function check_if_is_integer(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 ((parseFloat(value) == parseInt(value)) && !isNaN(value));

}

@Injectable()
export class ValidatorsService {

   public isInteger = (control:FormControl) => {

        // here, notice we use the ternary operator to return null when value is the integer we want.
        // you are supposed to return null for the validation to pass.

        return check_if_is_integer(control.value) ? null : {
           notNumeric: true
        }
   }

}

楽しい！

6
AIon

カスタムバリデーターを作成するだけです。

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()]);

これは、テキストタイプの入力でも機能します

2
Francesco Borzi