Angular 2 Final 中的最小/最大验证器 [英] Min / Max Validator in Angular 2 Final

问题描述

根据

所以，为了使表单在 firstValue ngModel <;0，我需要构建自定义验证器吗?

解决方案

要在 number 上应用 min/max validation，您需要创建一个 Custom验证器

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

• 必需
• requiredTrue
• 最小长度
• 最大长度
• 模式
• nullValidator
• 撰写
• composeAsync

---

Validator: 这是我的数字Validator的淡化版本，你可以随意改进它

static number(prms = {}): ValidatorFn {return (control: FormControl): {[key: string]: any} =>{if(isPresent(Validators.required(control))) {返回空；}让 val: number = control.value;if(isNaN(val) ||/\D/.test(val.toString())) {返回{数字":真}；} else if(!isNaN(prms.min) && !isNaN(prms.max)) {返回值prms.max ?{数字":真}:空；} 别的 {返回空；}};}

用法:

//检查有效数字var numberControl = new FormControl("", [Validators.required, CustomValidators.number()])//检查有效数字和最小值var numberControl = new FormControl("", CustomValidators.number({min: 0}))//检查有效数字和最大值var numberControl = new FormControl("", CustomValidators.number({max: 20}))//检查有效的数字和值范围 ie: [0-20]var numberControl = new FormControl("", CustomValidators.number({min: 0, max: 20}))

According to thoughtgram.io, the currently supported validators are:

• required
• minlength
• maxlength
• pattern

So, considering the following code (plunkr here):

@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!"; 
}

While minlength is supported, min="0" is ignored by angular validation:

So, to make the form result in an error when firstValue ngModel < 0, do I need to build a custom validator?

解决方案

To apply min/max validation on a number you will need to create a Custom Validator

Validators class currently only have a few validators, namely

• required
• requiredTrue
• minlength
• maxlength
• pattern
• nullValidator
• compose
• composeAsync

---

Validator: Here is toned down version of my number Validator, you can improve it as you like

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

Usage:

// 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}))

这篇关于Angular 2 Final 中的最小/最大验证器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！