Angular8 简单表单验证的实现示例


Posted in Javascript onJune 03, 2020

简单表单校验

傻瓜式校验

直接复制Antd中demo

<form nz-form [nzLayout]="'inline'" [formGroup]="validateForm" (ngSubmit)="submitForm()">
 <nz-form-item>
  <nz-form-control nzErrorTip="Please input your username!">
   <nz-input-group nzPrefixIcon="user">
    <input formControlName="userName" nz-input placeholder="Username" />
   </nz-input-group>
  </nz-form-control>
 </nz-form-item>
 <nz-form-item>
  <nz-form-control nzErrorTip="Please input your Password!">
   <nz-input-group nzPrefixIcon="lock">
    <input formControlName="password" nz-input type="password" placeholder="Password" />
   </nz-input-group>
  </nz-form-control>
 </nz-form-item>
 <nz-form-item>
  <nz-form-control>
   <button nz-button nzType="primary" [disabled]="!validateForm.valid">Log in</button>
  </nz-form-control>
 </nz-form-item>
</form>
validateForm!: FormGroup;

 submitForm(): void {
  for (const i in this.validateForm.controls) {
   this.validateForm.controls[i].markAsDirty();
   this.validateForm.controls[i].updateValueAndValidity();
  }
 }

 constructor(private fb: FormBuilder) {}

 ngOnInit(): void {
  this.validateForm = this.fb.group({
   userName: [null, [Validators.required]],
   password: [null, [Validators.required]],
   remember: [true]
  });
 }

此类表单校验较为单一,或者要求比较低,通常即为required校验,错误信息提示也多为固定不变。

Angular8 简单表单验证的实现示例

智能化校验

表单一旦开始有具体的细节校验或者复杂的业务参杂,校验提示必须准确、清晰。
userName为例,除了为必填项,必然需要符合某种格式,亦或是指定邮箱格式等,那么校验必须同时反映出错误类型,本例假设用户名有长度要求进行演示。

<nz-form-control [nzErrorTip]="getErrTipByField('userName')">
   <nz-input-group nzPrefixIcon="user">
    <input formControlName="userName" nz-input placeholder="Username" />
   </nz-input-group>
  </nz-form-control>
export class SimpleFormComponent implements OnInit {
 validateForm: FormGroup;
 errMessageMap = {};

 constructor(
  private fb: FormBuilder
 ) { }

 ngOnInit() {
  this.errMessageMap = {
   userName: {
    required: 'please input your name!',
    minlength: 'please input at least least 5 character'
   },
   password: {
    required: 'please input your password!'
   }
  };
  this.validateForm = this.fb.group({
   userName: [null, [Validators.required, Validators.minLength(5)]],
   password: [null, [Validators.required]],
   remember: [true]
  }, { updateOn: 'change' });
 }
 submitForm(): void {
  if (this.validateForm.controls) {
   for (const i in this.validateForm.controls) {
    if (this.validateForm.controls[i]) {
     this.validateForm.controls[i].markAsDirty();
     this.validateForm.controls[i].updateValueAndValidity();
    }
   }
  }
 }
 getErrTipByField(fieldName) {
  const errors = this.validateForm.get(fieldName).errors;
  let errMsg = '';
  for (const key in errors) {
   if (errors.hasOwnProperty(key)) {
    errMsg += this.errMessageMap[fieldName][key];
   }
  }
  return errMsg;
 }

}

构建出一个数据对象,以满足不同字段下不同错误类型的错误提示,根据业务需求,决定是否显示全部错误信息或者按照业务优先级显示。

Angular8 简单表单验证的实现示例

其它细节

表单校验时机可以设置,默认为change,可选blursubmit

表单验证正确的,想要提示勾号可以添加属性 nzHasFeedback

Angular8 简单表单验证的实现示例

submit中那段代码是重新对表单进行验证了,一般验证中是不需要的,动态表单验证后续结合自定义表单服务进行演示。

到此这篇关于Angular8 简单表单验证的实现示例的文章就介绍到这了,更多相关Angular8 表单验证内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery UI的Dialog无法提交问题的解决方法
Jan 11 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
Jan 13 Javascript
Javascript排序算法之计数排序的实例
Apr 05 Javascript
浅谈Jquery核心函数
Jun 18 Javascript
javascript HTML5 canvas实现打砖块游戏
Jun 18 Javascript
Bootstrap零基础入门教程(三)
Jul 18 Javascript
工厂模式在JS中的实践
Jan 18 Javascript
js 获取元素的具体样式信息getcss(实例讲解)
Jul 05 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 jQuery
JS严格模式原理与用法实例分析
Apr 27 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
Jul 20 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
Sep 07 Javascript
JS实现前端动态分页码代码实例
Jun 02 #Javascript
在Vue中创建可重用的 Transition的方法
Jun 02 #Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 #jQuery
2020淘宝618理想生活列车自动领喵币js脚本的代码
Jun 02 #Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
Jun 02 #Javascript
2020京东618叠蛋糕js脚本(亲测好用)
Jun 02 #Javascript
vue项目在webpack2实现移动端字体自适配功能
Jun 02 #Javascript
You might like
解析PHP中数组元素升序、降序以及重新排序的函数
2013/06/20 PHP
PHP循环结构实例讲解
2014/02/10 PHP
浅谈PHP中的
2016/04/23 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
Javascript 学习笔记 错误处理
2009/07/30 Javascript
JS检测输入字符是否包含非法字符的示例代码
2014/02/11 Javascript
Webwork 实现文件上传下载代码详解
2016/02/02 Javascript
jquery操作select元素和option的实例代码
2016/02/03 Javascript
浅谈JavaScript中的分支结构
2016/07/01 Javascript
JavaScript中的this引用(推荐)
2016/08/05 Javascript
利用JavaScript判断浏览器类型及版本
2016/08/23 Javascript
JS 获取HTML标签内的子节点的方法
2016/09/21 Javascript
详解Jquery的事件操作和文档操作
2016/12/19 Javascript
浅谈键盘上回车按钮的js触发事件
2017/02/13 Javascript
微信小程序调用PHP后台接口 解析纯html文本
2017/06/13 Javascript
小程序实现图片预览裁剪插件
2019/11/22 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
2020/09/04 Javascript
用Python实现换行符转换的脚本的教程
2015/04/16 Python
使用Python简单的实现树莓派的WEB控制
2016/02/18 Python
python批量实现Word文件转换为PDF文件
2018/03/15 Python
Python使用pymongo库操作MongoDB数据库的方法实例
2019/02/22 Python
Python安装OpenCV的示例代码
2020/03/05 Python
Python3 Tensorlfow:增加或者减小矩阵维度的实现
2020/05/22 Python
推荐一些比较有用的css3新属性
2014/11/11 HTML / CSS
Monica Vinader官网:英国轻奢珠宝品牌
2020/02/05 全球购物
俄罗斯GamePark游戏商店网站:购买游戏、游戏机和配件
2020/03/13 全球购物
波兰汽车配件网上商店:iParts.pl
2020/09/08 全球购物
PHP解析URL是哪个函数?怎么用?
2013/05/09 面试题
小学生检讨书大全
2014/02/06 职场文书
《长江之歌》教学反思
2014/04/17 职场文书
文言文辞职信
2015/02/28 职场文书
通知函格式范文
2015/04/27 职场文书
读《瓦尔登湖》有感:每个人都需要一个瓦尔登湖
2019/10/17 职场文书
MySQL系列之二 多实例配置
2021/07/02 MySQL
golang内置函数len的小技巧
2021/07/25 Golang
使用logback实现按自己的需求打印日志到自定义的文件里
2021/08/30 Java/Android