欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-24 17:28:00
angular里面对于表单验证,设置了很多指令。 也就是说不用自己写一些逻辑,直接绑定指令就行。 ng-app     启动你a...

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']),
});

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