angular4中关于表单的校验示例


Posted in Javascript onOctober 16, 2017

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

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

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"

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

Javascript 相关文章推荐
juqery 学习之三 选择器 可见性 元素属性
Nov 25 Javascript
利用Keydown事件阻止用户输入实现代码
Mar 11 Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
May 28 Javascript
json定义及jquery操作json的方法
Sep 29 Javascript
JavaScript数组去重的几种方法效率测试
Oct 23 Javascript
简单实现jquery隔行变色
Nov 09 jQuery
Vue 自定义动态组件实例详解
Mar 28 Javascript
JavaScript 中的 this 工作原理
Jun 20 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
Aug 16 Javascript
laravel实现中文和英语互相切换的例子
Sep 30 Javascript
JavaScript变量基本使用方法实例分析
Nov 15 Javascript
Ajax实现页面无刷新留言效果
Mar 24 Javascript
原生JS实现小小的音乐播放器
Oct 16 #Javascript
jQuery实现简单的回到顶部totop功能示例
Oct 16 #jQuery
老生常谈JavaScript面向对象基础与this指向问题
Oct 16 #Javascript
echarts饼图扇区添加点击事件的实例
Oct 16 #Javascript
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 #jQuery
JS继承与闭包及JS实现继承的三种方式
Oct 15 #Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
Oct 15 #Javascript
You might like
php trim 去除空字符的定义与语法介绍
2010/05/31 PHP
PHP 类与构造函数解析
2017/02/06 PHP
浅谈Laravel中的一个后期静态绑定
2017/08/11 PHP
Laravel配合jwt使用的方法实例
2020/10/25 PHP
JSON 学习之JSON in JavaScript详细使用说明
2010/02/23 Javascript
鼠标经过tr时,改变tr当前背景颜色
2014/01/13 Javascript
使用typeof方法判断undefined类型
2014/09/09 Javascript
js带闹铃功能的倒计时代码
2016/09/29 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
2016/12/20 Javascript
Vue.js事件处理器与表单控件绑定详解
2017/03/20 Javascript
vue引入swiper插件的使用实例
2017/07/19 Javascript
vue弹窗插件实战代码
2018/09/08 Javascript
jQuery事件blur()方法的使用实例讲解
2019/03/30 jQuery
微信小程序动态显示项目倒计时
2019/06/20 Javascript
微信小程序实用代码段(收藏版)
2019/12/17 Javascript
javascript canvas API内容整理
2020/02/16 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
2020/08/17 Javascript
vue组件入门知识全梳理
2020/09/21 Javascript
[01:37]全新的一集《真视界》——TI7总决赛
2017/09/21 DOTA
python中查找excel某一列的重复数据 剔除之后打印
2013/02/10 Python
Python将多份excel表格整理成一份表格
2018/01/03 Python
python 批量修改/替换数据的实例
2018/07/25 Python
在python plt图表中文字大小调节的方法
2019/07/08 Python
python列表推导式入门学习解析
2019/12/02 Python
Python函数参数定义及传递方式解析
2020/06/10 Python
python如何导入依赖包
2020/07/13 Python
Python2手动安装更新pip过程实例解析
2020/07/16 Python
HTML5 文件上传下载的实例代码
2017/07/03 HTML / CSS
zooplus德国:便宜地订购动物用品、动物饲料、动物食品
2020/05/06 全球购物
文职个人求职信范文
2013/09/23 职场文书
大四学生毕业自荐信
2013/11/07 职场文书
九年级化学教学反思
2014/01/28 职场文书
培训班通知
2015/04/25 职场文书
高中历史教学反思
2016/02/19 职场文书
如何在CSS中绘制曲线图形及展示动画
2021/05/24 HTML / CSS
TV动画《政宗君的复仇》第二季制作决定PV公布
2022/04/02 日漫