Angular 2 Final 中的最小/最大验证器

Question

根据 thoughtgram.io ，目前支持的验证器是：

• 必需的
• 最小长度
• 最长长度
• 图案

因此，考虑以下代码（ 此处为 plunkr ）：

 @Component({
  selector: 'my-app',
  template: `

  <form #formRef="ngForm">
    <input type="number" [(ngModel)]="firstValue" name="firstValue" min="0" required/>
    <input type="text" [(ngModel)]="secondValue" maxlength="5" name="secondValue" required/>
    <button type="submit"> Submit </button>
  </form>

  FORM: {{formRef.form | json }}
`
})
export class AppComponent {
  firstValue = -22;
  secondValue = "eyy macarena!";
}

虽然支持 minlength ，但 min="0" 被角度验证忽略：

那么，要让表单在 firstValue ngModel < 0 时出现错误，我是否需要构建自定义验证器？

原文由 David 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

要在 min/max validation number 您需要创建一个 Custom Validator

Validators 类目前只有几个验证器，即

• 必需的
• 必填True
• 最小长度
• 最长长度
• 图案
• 空验证器
• 撰写
• composeAsync

---

Validator： 这是我的号码Validator的低调版本，您可以根据需要进行改进

static number(prms = {}): ValidatorFn {
    return (control: FormControl): {[key: string]: any} => {
      if(isPresent(Validators.required(control))) {
        return null;
      }

      let val: number = control.value;

      if(isNaN(val) || /\D/.test(val.toString())) {

        return {"number": true};
      } else if(!isNaN(prms.min) && !isNaN(prms.max)) {

        return val < prms.min || val > prms.max ? {"number": true} : null;
      } else if(!isNaN(prms.min)) {

        return val < prms.min ? {"number": true} : null;
      } else if(!isNaN(prms.max)) {

        return val > prms.max ? {"number": true} : null;
      } else {

        return null;
      }
    };
  }

用法：

 // check for valid number
var numberControl = new FormControl("", [Validators.required, CustomValidators.number()])

// check for valid number and min value
var numberControl = new FormControl("", CustomValidators.number({min: 0}))

// check for valid number and max value
var numberControl = new FormControl("", CustomValidators.number({max: 20}))

// check for valid number and value range ie: [0-20]
var numberControl = new FormControl("", CustomValidators.number({min: 0, max: 20}))

原文由 Ankit Singh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我的严格编译器版本

import { Directive, Input } from '@angular/core';
import { AbstractControl, NG_VALIDATORS, ValidationErrors, Validator } from '@angular/forms';

@Directive({
  selector: '[appMinValidator]',
  providers: [{ provide: NG_VALIDATORS, useExisting: MinValidatorDirective, multi: true }]
})
export class MinValidatorDirective implements Validator {

  @Input()
  appMinValidator!: number;

  validate(control: AbstractControl): ValidationErrors | null {
    return (control.value as number < this.appMinValidator) ? { appMinValidator: true } : null;
  }

}

原文由 wutzebaer 发布，翻译遵循 CC BY-SA 4.0 许可协议