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 相关文章推荐
ie8模式下click无反应点击option无反应的解决方法
Oct 11 Javascript
jqGrid用法汇总(全经典)
Jun 28 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
Nov 17 Javascript
VUE使用vuex解决模块间传值问题的方法
Jun 01 Javascript
基于vue cli重构多页面脚手架过程详解
Jan 23 Javascript
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
Angular刷新当前页面的实现方法
Nov 21 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
Apr 10 Javascript
VUE 自定义组件模板的方法详解
Aug 30 Javascript
JavaScript实现串行请求的示例代码
Sep 14 Javascript
vue+element table表格实现动态列筛选的示例代码
Jan 14 Vue.js
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
原生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实现的比较完善的购物车类
2014/12/02 PHP
php实现从上传文件创建缩略图的方法
2015/04/02 PHP
PHP+JS三级菜单联动菜单实现方法
2016/02/24 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
javascript实现动态增加删除表格行(兼容IE/FF)
2007/04/02 Javascript
“不能执行已释放的Script代码”错误的原因及解决办法
2007/09/09 Javascript
JavaScript中null与undefined分析
2009/07/25 Javascript
Jquery Ajax请求代码(2)
2011/01/07 Javascript
读jQuery之十一 添加事件核心方法
2011/07/31 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
2016/11/18 Javascript
Node.js连接MongoDB数据库产生的问题
2017/02/08 Javascript
Vue中引入样式文件的方法
2017/08/18 Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
2017/11/28 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
2018/01/11 Javascript
element-ui table span-method(行合并)的实现代码
2018/12/20 Javascript
Angular6项目打包优化的实现方法
2019/12/15 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
2020/01/07 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
2020/10/29 Javascript
python发送邮件的实例代码(支持html、图片、附件)
2013/03/04 Python
用Django写天气预报查询网站
2018/10/21 Python
关于pandas的离散化,面元划分详解
2019/11/22 Python
Python selenium环境搭建实现过程解析
2020/09/08 Python
蔻驰意大利官网:COACH意大利
2019/01/16 全球购物
Magee 1866官网:Donegal粗花呢外套和大衣专家
2019/11/01 全球购物
团支书的期末学习总结自我评价
2013/11/01 职场文书
客服服务心得体会
2013/12/30 职场文书
党员批评与自我批评
2014/02/12 职场文书
服装促销活动方案
2014/02/23 职场文书
法律进学校实施方案
2014/03/15 职场文书
群众路线专项整治方案
2014/10/27 职场文书
公司员工安全协议书
2014/11/21 职场文书
2014年实习生工作总结
2014/11/27 职场文书
2015年环卫处个人工作总结
2015/07/27 职场文书
退伍军人感言
2015/08/01 职场文书
2016党校学习心得体会
2016/01/07 职场文书
Python中的嵌套循环详情
2022/03/23 Python