必要なバリデータは数

Question

入力が空であると動作しません、エラーは表示されません。

理由はNumberValueAccessorセレクタが入力と一致し、その数にコントロールの値を設定することです。入力の文字列が数値と一致しない場合、値はNaNです。これは、空文字列の場合です。 しかし、必要なバリデータは、制御値が空白（nullまたはundefined）または空の文字列である場合にのみエラーを返します。これは、NumberValueAccessorが値をNaN番号に設定するため、これらの2つの条件のいずれにも当てはまりません。それは空の文字列のため、だけでなく、（「AAA」のような）数ではない文字列を表示することができので

必要なバリデータは実際のNaN値を確認することはできません。問題は、バリデーターが制御変数から入力された文字列を取り出すことができないことです。 https://github.com/angular/angular/issues/6932

より引用

私はまだこの問題に直面しています。あなたが常に適用するために、独自のrequiredNumberディレクティブを実装することができますAngular2

Answer 1

のいずれかの解決策はあります。

唯一の特別なことは、数字入力でcontrol.valueが設定されることになる初期化されていないnullを明示的に探していることです。

必要-number.validator.ts

import { Directive, Input, OnChanges, SimpleChanges } from '@angular/core'; 
import { AbstractControl, NG_VALIDATORS, Validator, Validators, ValidatorFn } from '@angular/forms'; 

function validateRequiredNumberFactory() : ValidatorFn { 
    return (control: AbstractControl) => { 
    let isValid = !isNaN(control.value) && control.value !== null; 
    console.log('isNaN: ' + isNaN(control.value)); 

    if(isValid) { 
     return null; 
    } 
    return { numberIsRequired: true }; 
    } 
} 

@Directive({ 
    selector: '[requiredNumber][ngModel]', 
    providers: [{provide: NG_VALIDATORS, useExisting: RequiredNumberValidatorDirective, multi: true}] 
}) 
export class RequiredNumberValidatorDirective implements Validator, OnChanges { 
    private valFn = Validators.nullValidator; 

    constructor() { 
    this.valFn = validateRequiredNumberFactory(); 
    } 

    validate(control: AbstractControl): {[key: string]: any} { 
    return this.valFn(control); 
    } 
} 

入力はこのようです：

<input requiredNumber name="someName" [(ngModel)]="myProperty" #namedInput="ngModel"/> 

は、ここでは、あなたの好みに合わせて、それはだhttp://plnkr.co/edit/gxTxOQBg8ilFHzgq4Ly0

クレジットを微調整することができplunkerですこの回答が由来したhttp://juristr.com/blog/2016/11/ng2-template-driven-form-validators/

私は主に、すべてのテンプレートのコード内と外の私のバリデータとの反応性のフォームを使用して。