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

 更新时间:2018年12月14日 11:07:52   作者:NeverSettle101  
这篇文章主要介绍了Angular2 自定义表单验证器的实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

废话

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

正文

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

Angular支持的内置validate属性:

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

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

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

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

现在我们要实现 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,
  });
 }
}

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

相关文章

  • 基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能

    基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能

    ngDraggable.js是一款比较简单实用的angularJS拖拽插件,借助于封装好的一些自定义指令,能够快速的进行一些拖拽应用开发。本文先从基本概念入手,给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下吧
    2019-04-04
  • 深入浅析AngularJS中的module(模块)

    深入浅析AngularJS中的module(模块)

    我们所说的模块,是你的AngularJS应用程序的一个组成部分,它可以是一个Controller,也可以是一个Service服务,也可以是一个过滤器(Filter),也可以是一个directive(指令)等等…都是属于一个模块,本文给大家介绍AngularJS中的module(模块) ,感兴趣的朋友一起学习吧
    2016-01-01
  • Angular企业级开发——MVC之控制器详解

    Angular企业级开发——MVC之控制器详解

    本篇文章主要介绍了Angular企业级开发——MVC之控制器详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • AngularJS使用ng-app自动加载bootstrap框架问题分析

    AngularJS使用ng-app自动加载bootstrap框架问题分析

    这篇文章主要介绍了AngularJS使用ng-app自动加载bootstrap框架问题,分析了前面文章中所述的ng-app自动加载bootstrap出现的错误原因与相应的解决方法,需要的朋友可以参考下
    2017-01-01
  • Angular.js实现获取验证码倒计时60秒按钮的简单方法

    Angular.js实现获取验证码倒计时60秒按钮的简单方法

    最近做项目的时候又遇到了验证码倒计时的需求,发现这个功能还是挺实用的,所以就想着总结一下,下面这篇文章主要给大家介绍了关于利用Angular.js如何实现获取验证码倒计时按钮的简单方法,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-10-10
  • AngularJS基础 ng-open 指令简单实例

    AngularJS基础 ng-open 指令简单实例

    本文主要介绍AngularJS ng-open 指令,这里帮大家整理了ng-open指令的基本资料,有需要的小伙伴可以参考下
    2016-08-08
  • 玩转Koa之koa-router原理解析

    玩转Koa之koa-router原理解析

    本文将要分析的是经常用到的路由中间件 -- koa-router,详细的介绍了koa-router概述和实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • 简述AngularJS相关的一些编程思想

    简述AngularJS相关的一些编程思想

    这篇文章主要介绍了AngularJS相关的一些编程思想,AngularJS是一款热门的JavaScript库,推荐!需要的朋友可以参考下
    2015-06-06
  • Angular 4环境准备与Angular cli创建项目详解

    Angular 4环境准备与Angular cli创建项目详解

    Angular4.0来了,更小,更快,改动少,所以下面这篇文章主要给大家介绍了关于Angular 4环境准备与学会使用Angular cli创建项目的相关资料,文中给出了详细的示例代码供大家参考学习,需要的朋友们下面来一起看看吧。
    2017-05-05
  • 详解angularjs跨页面传参遇到的一些问题

    详解angularjs跨页面传参遇到的一些问题

    这篇文章主要介绍了详解angularjs跨页面传参遇到的一些问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11

最新评论