dart angular2 - 验证数字形式

Angular2中有内建验证器来验证数字输入吗？属性“min”和“max”似乎没有被验证器解释。dart angular2 - 验证数字形式

感谢您的帮助。

我在我的模板输入：

<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。

来源

2016-09-28 matth3o

请发布演示您尝试的代码。 –

我认为'min'和'max'应该以这种方式工作，但我还没有尝试过一段时间。你使用的是什么Angular2版本？ –

没有，但你可以创建自己的，这样的事情

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

然后你应该添加NumberValidator您组件的directives名单。此外，如果要将变量绑定到min和max，则不需要仅将值传递到构造函数中，而是可以在每个min和max属性集上重新初始化_validator回调。事实上，将它分成两个单独的验证器可能会更好（在我的情况下，验证器也是step，无法单独工作）。

来源

2016-09-28 14:27:42

dart angular2 - 验证数字形式

回答

相关问题