다트 각도 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 콜백을 다시 초기화해야합니다. 사실 두 개의 별도의 유효성 검사기로 분할하는 것이 더 나을 수도 있습니다 (제 경우에는 step 유효성 검사기가 있으며 별도로 작동하지 않습니다).