web-dev-qa-db-ja.com

入力タイプ番号「数値のみ」の検証

type="number"の入力が、Reactive Forms（ディレクティブなし）のみを使用して値が数値またはnullの場合にのみ有効になるように検証するにはどうすればよいですか？
数字のみ[0-9]および。許可されている、いない「E」または任意の他の文字。

これまでに試したこと：

テンプレート：

<form [formGroup]="form" novalidate>
    <input type="number" formControlName="number" id="number">
</form>

成分：

export class App {
  form: FormGroup = new FormGroup({});

  constructor(
    private fb: FormBuilder,
  ) {
    this.form = fb.group({
      number: ['', [CustomValidator.numeric]]
    })
  }
}

CustomValidator：

export class CustomValidator{
  // Number only validation
  static numeric(control: AbstractControl) {
    let val = control.value;

    if (val === null || val === '') return null;

    if (!val.toString().match(/^[0-9]+(\.?[0-9]+)?$/)) return { 'invalidNumber': true };

    return null;
  }
}

Plunker

問題は、ユーザーが数字以外の何か（ "123e"または "abc"）を入力すると、FormControlの値がnullになることです。フィールドが必須ではないため、フィールドが本当に空の場合はnull値が有効である必要があります。

クロスブラウザのサポートも重要です（Chromeの数字入力フィールドでは、ユーザーは文字を入力できません-「e」を除くが、FireFoxとSafariは可能です）。

formsangularvalidation
15
Mihailo

HTMLファイルでは、このようにあなたのためのパターンngIfを追加することができます

<div class="form-control-feedback" *ngIf="Mobile.errors && (Mobile.dirty || Mobile.touched)">
        <p *ngIf="Mobile.errors.pattern" class="text-danger">Number Only</p>
      </div>

.TSではあなたがバリデータのパターンを追加することができますファイル - 「^ [0-9] * $」

this.Mobile = new FormControl('', [
  Validators.required,
  Validators.pattern("^[0-9]*$"),
  Validators.minLength(8),
]);
14
Ishara Madawa

最も簡単な方法は、このようなライブラリを使用することです one 、具体的にはnoStringsをtrueにしたい

    export class CustomValidator{   // Number only validation   
      static numeric(control: AbstractControl) {
        let val = control.value;

        const hasError = validate({val: val}, {val: {numericality: {noStrings: true}}});

        if (hasError) return null;

        return val;   
      } 
    }
1
luanped

このような単純なものを試す方が簡単な場合があります。

validateNumber(control: FormControl): { [s: string]: boolean } {

  //revised to reflect null as an acceptable value 
  if (control.value === null) return null;

  // check to see if the control value is no a number
  if (isNaN(control.value)) {
    return { 'NaN': true };
  }

  return null; 
}

お役に立てれば。

コメントごとに更新されました。このようにバリデーターを呼び出す必要があります

number: new FormControl('',[this.validateNumber.bind(this)])

Bind（this）は、コンポーネントにバリデーターを配置する場合に必要です。

0
Ken

カスタムバリデータで正規表現を使用する必要があります。たとえば、入力フィールドに9桁のみを許可するコードは次のとおりです。

function ssnValidator(control: FormControl): {[key: string]: any} {
  const value: string = control.value || '';
  const valid = value.match(/^\d{9}$/);
  return valid ? null : {ssn: true};
}

こちらのサンプルアプリをご覧ください。

https://github.com/Farata/angular2TypeScript/tree/master/Angular4/form-samples/src/app/reactive-validator

0
Yakov Fain