Question

Angular2中是否有内置验证器来验证数字输入？属性＆＃34; min＆＃34;和＆＃34; max＆＃34;似乎没有被验证者解释。

感谢您的帮助。

我在模板中的输入：

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

如果我输入＆＃34; 20＆＃34;，我的输入仍然是＆＃34; ng-valid＆＃34;。

我使用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;
    };
  }
}

然后您应该将NumberValidator添加到您的组件的directives列表中。此外，如果要将变量绑定到min和max，则不必仅将值传递给构造函数，而是在每个_validator和{上重新初始化min回调。 {1}}属性集。事实上，最好将它拆分为两个单独的验证器（在我的情况下，还有max验证器，它不能单独工作。）

dart angular2 - 验证表格中的数字

1 个答案: