angular 表单验证器验证的同时限制输入的实现

 更新时间:2019年04月11日 09:18:14   作者:TonyStudio  
表单验证是经常用到一个东西,这篇文章主要介绍了angular 表单验证器验证的同时限制输入的实现,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

angular里面对于表单验证,设置了很多指令。

也就是说不用自己写一些逻辑,直接绑定指令就行。

ng-app     启动你angular的模块

 ng-controller 控制器,启动你angualr里面的逻辑代码作用在页面上

ng-options  循环你select里面的option标签,很好用的

 ng-submit,表单提交执行的

novalidate  表单form配合后期检测的

ng-model  实现双数据绑定

ng-show 根据一定的逻辑实现显示

ng-cloak 绑定在节点上,防止节点渲染,angular指令闪烁

ng-class class类名根据你的逻辑,出现

ng-required 检测你的input为不为空

ng-pattern 正则表达式,绑定在input上面限制输入规范

ng-maxlength 最多输入限制

ng-minlength 最少输入限制

ng-disabled="myForm.$invalid" 脏检测

大概就需要这些指令了,大家不要喷我。谢谢

仔细回想以前使用响应式表单的验证器的时候,只是验证输入的值是否非法,而没有做对应的限制输入,比如当输入一串金额的时候只能输入数字,有这种需求的时候,我们该怎么做限制输入?用input来监听?用onModelChange来监听?我们可以直接写在验证器里面。

表单的验证分为模板驱动验证和响应式表单的验证,响应式表单添加自定义验证器非常方便,所以我们来直接以响应式表单的验证为研究基础。

首先构造基本的表单:

<form nz-form [formGroup]="validateForm">
 <nz-form-item>
  <nz-form-label [nzSpan]="6" nzFor="code">GA Code</nz-form-label>
  <nz-form-control [nzSpan]="14">
   <input nz-input name="code" formControlName="code" id="code">
  </nz-form-control>
 </nz-form-item >
</form>
validateForm: FormGroup;
constructor(
  private fb: FormBuilder,
) {
}
ngOnInit() {
  this.validateForm = this.fb.group({
    code: [33, [Validators.required, Validators.maxLength(6)]],
  });
}

我们创建的这个响应式表单是要验证一个谷歌验证的「code」字段,并给与了两个验证器,一个必填验证,一个验证长度最长是6位。运行起来后,我们输入的如果超过6位范围输入框就会变成红色,这是OK的。

现在我们需要在验证的同时限制输入,比如只让用户输入数字,其他的一切都不可输入。

创建验证器,在验证的同时,限制输入

我们使用正则表达式来判断。首先,判断一个字符串是否是全数字:/^\d*$/.test(value)。然后将有「杂质」的字符串修正为纯数字:value.replace(/[^0-9]/ig, '')。

思路是,创建验证器,当有输入值的时候,验证器运行,判断是否是全数字,如果不是就进行替换。我们可以得到如下的验证器:

onlyNumber(): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} | null => {
    // value有值且如果值包含非数字,就需要替换
    if (control.value && !/^\d*$/.test(control.value)) {
      control.setValue(control.value.replace(/[^0-9]/ig, ''), {
        emitEvent: false,
        emitViewToModelChange: false,
      });
    }
    return null;
  };
}

将验证器使用在我们的响应式表单上:

this.validateForm = this.fb.group({
  code: [33, [Validators.required, this.onlyNumber(), Validators.maxLength(6)]],
});

运行程序,随便输入来测试测试,竟然是ok的?😯(那我前几次的时候是做了什么骚造作让浏览器堆栈溢出的???)

emmmmmmmm。。。。。。我上次确实是让浏览器堆栈溢出了,这次正常反而很奇怪了。不影响,我们来看看setValue(value, options)的options几个配置参数吧:

  • onlySelf:如果为 true,则每次变更只影响该控件本身,不影响其父控件。默认为 false。
  • emitEvent:如果为 true 或未提供(默认),则当控件值变化时, statusChanges 和 valueChanges 这两个 Observable 都会以最近的状态和值发出事件。 如果为 false,则不会发出事件。
  • emitModelToViewChange:如果为 true 或未提供(默认),则每次变化都会触发一个 onChange 事件以更新视图。
  • emitViewToModelChange:如果为 true 或未提供(默认),则每次变化都会触发一个 ngModelChange 事件以更新模型。

首先,对于onlySelf来讲,如果我们有跨字段的验证的话,设置这个为false就不影响表单层次的验证器。emitEvent是对statusChange和valeChanges两个Observable的影响,一般我们用Observable的方式监听字段的值变化时有用到。emitModelToViewChange配置是触发onChange来更新视图的,如果如果设置为false的话,无论我们怎么更新字段的值,是不会显示在页面上的。emitViewToModelChange触发ngModelCahnge时间更新模型,但好像这个参数设置为false并没什么用。

得得得,好的就行。

假如我们需要在验证的条件也和其他表单字段有关系怎么办?那我们需要formGroup级的验证。

formGroup的验证器

我们需要这样创建验证器,返回一个由formGroup构成的验证器:

onlyNumberValidator(formKeys: string[]): ValidatorFn {
  return (formGroup: FormGroup): ValidationErrors | null => {
    for (const key of formKeys) {
      const value = formGroup.controls[key].value;
      if (value && !/^\d*$/.test(value)) {
        formGroup.controls[key].setValue(value.replace(/[^0-9]/ig, ''), {
          onlySelf: true,
        });
      }
    }
    return null;
  }};

使用:

this.validateForm = this.fb.group({
  typeList: [[]],
  feeRate: [null, [Validators.required, Validators.pattern(/^[0-9]+(.[0-9]{1,2})?$/), Validators.max(0.999)]],
  code: [33, [Validators.required, Validators.maxLength(6)]],
}, {
  validator: this.onlyNumberValidator(['code']),
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • AngularJS实现元素显示和隐藏的几个案例

    AngularJS实现元素显示和隐藏的几个案例

    这篇文章主要介绍了AngularJS实现元素显示和隐藏的几个案例,需要的朋友可以参考下
    2015-12-12
  • AngularJs自定义服务之实现签名和加密

    AngularJs自定义服务之实现签名和加密

    AngularJS 是一个 JavaScript 框架,它可以通过 <script> 标签添加到 HTML 页面。这篇文章主要介绍了AngularJs自定义服务之实现签名和加密的相关资料,需要的朋友可以参考下
    2016-08-08
  • AngularJS2 与 D3.js集成实现自定义可视化的方法

    AngularJS2 与 D3.js集成实现自定义可视化的方法

    本篇文章主要介绍了ANGULAR2 与 D3.js集成实现自定义可视化的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • Angular中使用嵌套Form的详细步骤

    Angular中使用嵌套Form的详细步骤

    Angular响应式表单使用显式的、不可变的方式,管理表单在特定的时间点上的状态,下面这篇文章主要给大家介绍了关于Angular中使用嵌套Form的详细步骤,需要的朋友可以参考下
    2022-04-04
  • angular和BootStrap3实现购物车功能

    angular和BootStrap3实现购物车功能

    这篇文章主要为大家详细介绍了angular和BootStrap3实现购物车功能的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • angular1.x ui-route传参的三种写法小结

    angular1.x ui-route传参的三种写法小结

    今天小编就为大家分享一篇angular1.x ui-route传参的三种写法小结,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • AngularJs directive详解及示例代码

    AngularJs directive详解及示例代码

    本文主要讲解AngularJs directive的知识,这里整理了相关资料及示例代码,有兴趣的小伙伴可以参考下
    2016-09-09
  • Angularjs实现多图片上传预览功能

    Angularjs实现多图片上传预览功能

    这篇文章主要介绍了Angularjs实现多图片上传预览功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-07-07
  • 浅谈Angular单元测试总结

    浅谈Angular单元测试总结

    这篇文章主要介绍了浅谈Angular单元测试总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • AngularJS中$http服务常用的应用及参数

    AngularJS中$http服务常用的应用及参数

    大家都知道,AngularJS中的$http有很多参数和调用方法,所以本文只记录了比较常用的应用及参数,方便大家以后使用的时候参考学习,下面一起来看看吧。
    2016-08-08

最新评论