ダーツの角2 - 形式で番号を確認

Question

数値入力を検証するために、Angular2に組み込みバリデーターがありますか？属性 "min"と "max"はバリデータによって解釈されないようです。

ありがとうございました。

私のテンプレートでの私の入力：

<input id="nbLuggage" name="nbLuggage" classe="form-control" 
     type="number" min="1" max="15" 
     [(ngModel)]="form.nbLuggage" ngControl="nbLuggage" required> 

私は "20" と入力した場合、私の入力は依然として "NG-有効" です。

私はangular2：2.0.0-beta.21を使用します。

Answer 1

ありませんが、あなたは、この

const NUMBER_VALIDATOR = const Provider(NG_VALIDATORS, useExisting: NumberValidator, multi: true); 

@Directive(
    selector: 
    "input[type=number][ngControl],input[type=number][ngFormControl],input[type=number][ngModel])", 
    providers: const [NUMBER_VALIDATOR]) 
class NumberValidator implements Validator { 
    ValidatorFn _validator; 

    NumberValidator(@Attribute("min") String minStr, @Attribute("max") String maxStr) { 
    final num min = minStr == null ? null : num.parse(minStr); 
    final num max = maxStr == null ? null : num.parse(maxStr); 
    this._validator = NumberValidators.minMaxNumberValidator(min, max); 
    } 
    Map<String, dynamic> validate(AbstractControl c) { 
    return this._validator(c); 
    } 
} 

abstract class NumberValidators { 
    NumberValidators._(); 

    static ValidatorFn minMaxNumberValidator(num min, num max) { 
    return (AbstractControl control) { 
     if (Validators.required(control) != null) { 
     return null; 
     } 
     final num value = control.value; 
     if (value != null) { 
     if (min != null && value < min) { 
      return {"min": {"required": min, "actual": value}}; 
     } 
     if (max != null && value > max) { 
      return {"max": {"required": max, "actual": value}}; 
     } 
     } 
     return null; 
    }; 
    } 
} 

のようなものを独自に作成することができます。そして、あなたのコンポーネントのdirectivesリストにNumberValidatorを追加する必要があります。 また、変数をminとmaxにバインドする場合は、値をコンストラクタに渡すだけでなく、それぞれminおよびmax属性セットの_validatorコールバックを再初期化する必要があります。実際には2つの別々のバリデーターに分割するほうが良いかもしれません（私の場合、別々には動作しないstepバリデーターもあります）。