为了账号安全,请及时绑定邮箱和手机立即绑定

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

/ 猿问

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

MYYA 2019-11-18 18:17:46

根据thinkgram.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时,要使表单导致错误,是否需要构建自定义验证器?



查看完整描述

3 回答

?
慕莱坞5435954

要申请min/max validation,number您需要创建一个Custom Validator


验证器类目前只有几个验证器,即


需要

requiredTrue

最小长度

最长长度

图案

nullValidator

撰写

composeAsync

验证器: 这是我的数字验证器的简化版本,您可以根据需要进行改进


static number(prms = {}): ValidatorFn {

    return (control: FormControl): {[key: string]: string} => {

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


查看完整回答
反对 回复 2019-11-18
?
慕的地6264312

我发现一个实现许多自定义验证器的库-ng2-validation-可与模板驱动的表单(属性指令)一起使用。例:


<input type="number" [(ngModel)]="someNumber" name="someNumber" #field="ngModel" [range]="[10, 20]"/>

<p *ngIf="someNumber.errors?.range">Must be in range</p>


查看完整回答
反对 回复 2019-11-18
?
富国沪深

通过创建实现该Validator接口的指令,您可以轻松实现自己的验证(模板驱动)。


import { Directive, Input, forwardRef } from '@angular/core'

import { NG_VALIDATORS, Validator, AbstractControl, Validators } from '@angular/forms'


@Directive({

  selector: '[min]',

  providers: [{ provide: NG_VALIDATORS, useExisting: MinDirective, multi: true }]

})

export class MinDirective implements Validator {


  @Input() min: number;


  validate(control: AbstractControl): { [key: string]: any } {


    return Validators.min(this.min)(control)


    // or you can write your own validation e.g.

    // return control.value < this.min ? { min:{ invalid: true, actual: control.value }} : null




  }


}


查看完整回答
反对 回复 2019-11-18

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信