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

Angular2 自定义表单验证器的实现方法

程序员文章站 2022-06-03 11:45:41
废话 最近由于项目上需要用到表单验证,前面直接通过 (input) 事件进行数据检查,但是不好和自带的验证器统一,而且也不正统。于是打算研究一下自定义验证器,网上类似的文...

废话

最近由于项目上需要用到表单验证,前面直接通过 (input) 事件进行数据检查,但是不好和自带的验证器统一,而且也不正统。于是打算研究一下自定义验证器,网上类似的文章很多,但是自己在实现的过程中还是遇到了一些问题。于是还是啰嗦的自己写一篇文章。

正文

这里有官方文档:验证响应式表单,用户的视觉提示,自定义验证器,这篇文章是根据这些文档所来(前面两者就不再赘述比较简单,也说的比较清楚)

angular支持的内置validate属性:

  • required- 设置表单控件值是非空的
  • email - 设置表单控件的格式是email
  • minlength - 设置表单控件值的最小长度
  • maxlength - 设置表单控件长度的最大值
  • pattern - 设置表单控件的值需匹配 pattern 对应的模式

通过表单控件的.valid判断验证结果,其结果状态:

  • valid - 有效
  • invalid - 无效
  • pristine - 表单值未改变
  • dirty - 表单值已改变
  • touched - 表单控件已被访问过
  • untouched- 表单控件未被访问过

我们经常会遇到如下场景,表单验证(样式比较丑陋请忽略)

Angular2 自定义表单验证器的实现方法

现在我们要实现 url 验证,可以直接通过 正则表达式来匹配,这样的话,直接用 angular 自带的验证器即可,但是如果要兼容大写呢?我们就不能简单的直接使用正则来匹配了,我们需要在判断之前进行一次转换,把内容全部转换成小写,才能进行正则判断。

这里我们 新建一个 validatorbase 类来存放所有的验证,并且新建一个 静态方法 urlvalidator(input:formcontrol) 来对数据进行 url 验证。具体方法如下:

import { formcontrol } from '@angular/forms';
import { injectable } from '@angular/core'

export class validatebase{
 public static urlvalidator(input: formcontrol){
  let validatestring = "(https?://|www|www|ftp://|file://)[-a-za-z0-9+&@#/%?=~_|!:,.;]+[.]+[-a-za-z0-9+&@#/%=~_|]";

  console.log(input.value);
  //set value 
  let v = input.value;

    if(v!=undefined&&v!="")
    {
     if(v.tolowercase().match(validatestring))
     {
      return null;
     }
     else{
     return {
      isurl:true
     }
    }
    }
    return null;
 }
}

注意:

这里当匹配成功(即验证成功是需要返回 null 的,不能返回 {isurl:false},失败是返回的{isurl:true},不是返回 {isurl:false}),这样才会让最后表单验证的值为正确的表现。

这里{isurl:true} 中的 isurl,即为传入的 formcontrol 的.haserror()中的参数值。

调用页面

<form [formgroup]="detailform" (ngsubmit)="submit()">
 <div>
  <label for="linkedurl">linkedurl:</label>
  <input type="linkedurl" name="linkedurl" id="linkedurl" [formcontrol]="linkedurl">
  <div class="col-xs-4 col-sm-4" [style.color]="(linkedurl.touched&&linkedurl.valid==false)?'#d16e6c':'green'" [hidden]="linkedurl.untouched">
   <div [hidden]="!linkedurl.haserror('maxlength')">linkedurl can not be greater than 250 characters.</div>
   <div [hidden]="!linkedurl.haserror('isurl')">linkedurl is not an url.</div>
   <div [hidden]="!linkedurl.haserror('required')">required field.</div>
   <!--success!-->
   <div [style.color]="'green'" [hidden]="!linkedurl.valid">validate success!</div>
  </div>
 </div>
 <button type="submit" [disabled]="!detailform.valid">log in</button>
</form>

调用页面对应 ts

import { validatebase } from './../../validators/validator.base';
import { component, oninit } from '@angular/core';

import {
 formgroup,
 formbuilder,
 formcontrol,
 validators
 } from '@angular/forms';

@component({
 selector: 'validate-component',
 templateurl: 'validate.component.html'
 })

export class sweepstakesdetailcomponent implements oninit {

 private detailform: formgroup;
 private linkedurl: formcontrol;

 ngoninit(): void {
  this.validateform();
 }

 private validateform(){

  this.linkedurl = new formcontrol('',[
   validators.required,
   validators.maxlength(250),
   validatebase.urlvalidator
  ]);

  //form
  this.detailform = this.formbuilder.group({
   linkedurl:this.linkedurl,
  });
 }
}

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