脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → angular4 表单的校验

angular4中关于表单的校验示例

 更新时间：2017年10月16日 09:05:31   作者：水痕01  
本篇文章主要介绍了angular4中关于表单的校验示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

本章中介绍响应式表单的创建及表单输入值的校验,对于模板表单就略过。

一、使用响应式表单的步骤

1、在模块(一般是app.module.ts)中引入ReactiveFormsModule
2、在组件的ts文件中使用响应式表单

import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
export class ReactiveFormComponent implements OnInit {
  private myForm: FormGroup;
  constructor(private fb: FormBuilder) {
    this.createForm();
  }

  ngOnInit() {
  }
  // 创建表单元素
  createForm() {
    this.myForm = this.fb.group({
      username: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(6)]],
      mobile: ['', [Validators.required]],
      password: this.fb.group({
        pass1: [''],
        pass2: ['']
      })
    });
  }
  // 提交表单函数
  postDate() {
    /**
     * valid:是否有效
     * invalid:无效
     * dirty:脏
     * status:状态
     * errors:显示错误
     */
    if(this.myForm.valid){
      console.log(this.myForm.value);
    }
  }
}

3、在组件的html页面中使用

<form [formGroup]="myForm" (ngSubmit)="postDate()">
  <div class="form-group">
    <label for="username">用户名:</label>
    <input type="text" placeholder="请输入用户名" class="form-control" id="username" formControlName="username" />
  </div>
  <div class="form-group">
    <label for="mobile">手机号码:</label>
    <input type="text" placeholder="请输入手机号码" class="form-control" id="mobile" formControlName="mobile"/>
  </div>
  <div formGroupName="password" style="border:none;">
    <div class="form-group">
      <label>密码:</label>
      <input type="password" class="form-control" placeholder="请输入密码" formControlName="pass1" />
    </div>
    <div class="form-group">
      <label>确认密码:</label>
      <input type="password" class="form-control" placeholder="请再次输入密码" formControlName="pass2" />
    </div>
  </div>
  <div class="form-group">
    <input type="submit" value="提交" class="btn btn-warning" [disabled]="!myForm.valid" />
  </div>
</form>

二、使用表单校验数据

1、angular中自带了三个常见的表单校验的是在Validators中的required,minLength,maxLength
2、自定义表单校验器(其实就一个函数,函数的参数是当前需要校验的行,返回一个任意对象)

**格式**
export function fnName(control:FormControl|FormGroup):any{

}

3、响应式表单字段中可以写三个值,第一个是返显到页面上的,第二个参数是校验器(可以是一组),第三个参数异步校验(常见判断手机号码,用户名是否重复注册)

三、自定义一个校验方法的步骤

1、把项目中需要用的校验器单独写一个文件

import { FormControl, FormGroup } from '@angular/forms';
/**
 * 自定义验证器(其实就是一个函数,一个返回任意对象的函数)
 * 传递的参数是当前需要验证的表单的FormControl
 * 通过传递的参数获取当前表单输入的值
 */
export function mobileValidator(control: FormControl): any {
  console.dir(control);
  // 获取到输入框的值
  const val = control.value;
  // 手机号码正则
  const mobieReg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
  const result = mobieReg.test(val);
  return result ? null : { mobile: { info: '手机号码格式不正确' } };
}

2、使用自己定义的校验器

createForm() {
  this.myForm = this.fb.group({
    username: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(6)]],
    mobile: ['', [Validators.required, mobileValidator]],
    password: this.fb.group({
      pass1: [''],
      pass2: ['']
    })
  });
}

3、定义一个密码组的校验

// 定义一个密码组的验证方法
export function passValidator(controlGroup: FormGroup): any {
  // 获取密码输入框的值
  const pass1 = controlGroup.get('pass1').value as FormControl;
  const pass2 = controlGroup.get('pass2').value as FormControl;
  console.log('你输入的值:', pass1, pass2);
  const isEqule: boolean = (pass1 === pass2);
  return isEqule ? null : { passValidator: { info: '两次密码不一致' } };
}

4、使用

createForm() {
  this.myForm = this.fb.group({
    username: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(6)]],
    mobile: ['', [Validators.required, mobileValidator]],
    password: this.fb.group({
      pass1: [''],
      pass2: ['']
    }, {validator: passValidator})
  });
}

四、关于前端页面中错误的显示

1、页面显示错误

<div class="form-group">
  <label for="username">用户名:</label>
  <input type="text" placeholder="请输入用户名" class="form-control" id="username" formControlName="username" />
  <!-- 当输入框没有访问的时候或者合法的时候不显示 -->
  <div [hidden]="myForm.get('username').valid || myForm.get('username').untouched">
    <p [hidden]="!myForm.hasError('required','username')">用户名必填的</p>
    <p [hidden]="!myForm.hasError('minlength','username')">用户名长度过短</p>
    <p [hidden]="!myForm.hasError('maxlength','username')">用户名长度太长</p>
  </div>
</div>
<div class="form-group">
  <label for="mobile">手机号码:</label>
  <input type="text" placeholder="请输入手机号码" class="form-control" id="mobile" formControlName="mobile"/>
  <div [hidden]="myForm.get('mobile').valid || myForm.get('mobile').untouched">
    <p [hidden]="!myForm.hasError('mobile', 'mobile')">{{myForm.getError('mobile', 'mobile')?.info}}</p>
  </div>
</div>
<div formGroupName="password" style="border:none;">
  <div class="form-group">
    <label>密码:</label>
    <input type="password" class="form-control" placeholder="请输入密码" formControlName="pass1" />
  </div>
  <div class="form-group">
    <label>确认密码:</label>
    <input type="password" class="form-control" placeholder="请再次输入密码" formControlName="pass2" />
  </div>
  <!-- 对于group可以不在外面加一层判断 -->
  <div>
    <p [hidden]="!myForm.hasError('passValidator','password')">
      {{myForm.getError('passValidator','password')?.info}}
    </p>
  </div>
</div>

2、定义样式文件

.ng-touched:not(form),.ng-invalid:not(form) {
  border: 1px solid #f00;
}

.ng-valid:not(form),.ng-untouched:not(form) {
  border: 1px solid #ddd;
}
p{
  color:#f00;
}

五、自定义class显示错误

1、在input输入框上写上

表示该字段无效且触碰过就添加这个class=”error”

 [class.error]="myForm.get('username').invalid && myForm.get('username').touched"

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

您可能感兴趣的文章:

相关文章

  • 深入理解Angular.JS中的Scope继承

    深入理解Angular.JS中的Scope继承

    这篇文章主要给大家深入的介绍了关于Angular.JS中Scope继承的相关资料，Angular。JS中scope之间的继承关系使用JavaScript的原型继承方式实现，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
    2017-06-06
  • Angular 4 依赖注入学习教程之FactoryProvider的使用（四）

    Angular 4 依赖注入学习教程之FactoryProvider的使用（四）

    这篇文章主要给大家介绍了关于Angular 4 依赖注入之FactoryProvider使用的相关资料，文中介绍的非常详细，对大家学习或者使用Angular4具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
    2017-06-06
  • AngularJS轻松实现双击排序的功能

    AngularJS轻松实现双击排序的功能

    网上已经有AngularJS比较多的相关教程了，那么这篇文章我们一起来看一个AngularJS双击排序的例子，对大家日常开发很有帮助的，有需要的可以参考借鉴。
    2016-08-08
  • AngularJS使用ng-app自动加载bootstrap框架问题分析

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

    这篇文章主要介绍了AngularJS使用ng-app自动加载bootstrap框架问题,分析了前面文章中所述的ng-app自动加载bootstrap出现的错误原因与相应的解决方法,需要的朋友可以参考下
    2017-01-01
  • 详解Angular路由之子路由

    详解Angular路由之子路由

    本文将介绍Angular子路由的用法，对此感兴趣的同学，可以参考下
    2021-05-05
  • 详解在Angular项目中添加插件ng-bootstrap

    详解在Angular项目中添加插件ng-bootstrap

    这篇文章主要介绍了详解在 Angular 项目中添加插件 ng-bootstrap，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-07-07
  • AngularJS打开页面隐藏显示表达式用法示例

    AngularJS打开页面隐藏显示表达式用法示例

    这篇文章主要介绍了AngularJS打开页面隐藏显示表达式用法,结合实例形式分析了AngularJS中打开页面隐藏显示表达式相关命令使用技巧,需要的朋友可以参考下
    2016-12-12
  • Angular.JS中select下拉框设置value的方法

    Angular.JS中select下拉框设置value的方法

    select 是 AngularJS 预设的一组directive。下面这篇文章主要给大家介绍了关于Angular.JS中select下拉框设置value的方法，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
    2017-06-06
  • Angular中ng-options下拉数据默认值的设定方法

    Angular中ng-options下拉数据默认值的设定方法

    本篇文章主要介绍了Angular中ng-options下拉数据默认值的设定方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-06-06
  • 分享使用AngularJS创建应用的5个框架

    分享使用AngularJS创建应用的5个框架

    如果你计划使用AngularJS创建你的Web应用，那现在就开始吧。你不需要有任何的恐惧和担心，因为现在有很多的框架都可以很好地支持AngularJS
    2015-12-12

最新评论