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 相关文章推荐
javascript中&quot;/&quot;运算符常见错误
Oct 13 Javascript
jQuery满意度星级评价插件特效代码分享
Aug 19 Javascript
跟我学习javascript的隐式强制转换
Nov 16 Javascript
JavaScript function函数种类详解
Feb 22 Javascript
Javascript之BOM(window对象)详解
May 25 Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
Dec 26 Javascript
详解angular中的作用域及继承
May 31 Javascript
详解使用vue实现tab 切换操作
Jul 03 Javascript
详解ES6中的Map与Set集合
Mar 22 Javascript
vueScroll实现移动端下拉刷新、上拉加载
Mar 22 Javascript
vue项目中使用多选框的实例代码
Jul 22 Javascript
微信小程序 根据不同用户切换不同TabBar
Apr 21 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
单位速度在实战中的运用
2020/03/04 星际争霸
Zend framework处理一个http请求的流程分析
2010/02/08 PHP
PHP并发查询MySQL的实例代码
2017/08/09 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
PHP基于自定义函数实现的汉字转拼音功能实例
2017/09/30 PHP
thinkphp3.2框架中where条件查询用法总结
2019/08/13 PHP
禁止直接访问php文件代码分享
2020/05/05 PHP
jQuery 学习第六课 实现一个Ajax的TreeView
2010/05/17 Javascript
获取dom元素那些讨厌的位置封装代码
2010/06/23 Javascript
struts2+jquery+json实现异步加载数据(自写)
2013/06/24 Javascript
js判断鼠标左、中、右键哪个被点击的方法
2015/01/27 Javascript
jQuery插件datepicker 日期连续选择
2015/06/12 Javascript
Javascript实现单例模式
2016/01/24 Javascript
angular.js分页代码的实例
2016/07/27 Javascript
基于JS实现的随机数字抽签实例
2016/12/08 Javascript
JavaScript判断浏览器和hack滚动条的写法
2017/07/23 Javascript
Vue父组件调用子组件事件方法
2018/02/23 Javascript
JS监听滚动和id自动定位滚动
2018/12/18 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
2019/04/30 Javascript
python3.X 抓取火车票信息【修正版】
2018/06/19 Python
详解Python学习之安装pandas
2019/04/16 Python
详细介绍pandas的DataFrame的append方法使用
2019/07/31 Python
用python打开摄像头并把图像传回qq邮箱(Pyinstaller打包)
2020/05/17 Python
Python切片列表字符串如何实现切换
2020/08/06 Python
python实现经纬度采样的示例代码
2020/12/10 Python
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
2012/12/13 HTML / CSS
服装行业创业计划书范文
2014/02/05 职场文书
公务员政审单位鉴定材料
2014/05/16 职场文书
法院信息化建设方案
2014/05/21 职场文书
工作态度检讨书范文
2015/05/06 职场文书
有关水浒传的读书笔记
2015/06/25 职场文书
《认识钟表》教学反思
2016/02/16 职场文书
旅游安全责任协议书
2016/03/22 职场文书
Keras多线程机制与flask多线程冲突的解决方案
2021/05/28 Python
CSS实现五种常用的2D转换
2021/12/06 HTML / CSS
Python测试框架pytest核心库pluggy详解
2022/08/05 Golang