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 相关文章推荐
Javascript模板技术
Apr 27 Javascript
json简单介绍
Jun 10 Javascript
javascript 仿QQ滑动菜单效果代码
Sep 03 Javascript
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
Sep 22 Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
Mar 04 Javascript
Javascript操作URL函数修改版
Nov 07 Javascript
js Object2String方便查看js对象内容
Nov 24 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
Oct 04 Javascript
vue.js学习笔记:如何加载本地json文件
Jan 17 Javascript
Bootstrap table使用方法总结
May 10 Javascript
微信小程序实现图片上传放大预览删除代码
Jun 28 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
Nov 08 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
这部番真是良心,画质好到像风景区,剧情让人跟着小公会热血沸腾
2020/03/10 日漫
php中截取中文字符串的代码小结
2011/07/17 PHP
深入php 正则表达式的学习探讨
2013/06/06 PHP
PHP7 新特性详细介绍
2016/09/06 PHP
php判断IP地址是否在多个IP段内
2020/08/18 PHP
JQuery对class属性的操作实现按钮开关效果
2013/10/11 Javascript
js数组操作常用方法
2014/05/08 Javascript
jquery JSON的解析方式示例介绍
2014/07/27 Javascript
html文档中的location对象属性理解及常见的用法
2014/08/13 Javascript
JavaScript编程的单例设计模讲解
2015/11/10 Javascript
jQuery获取DOM节点实例分析(2种方式)
2015/12/15 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
2016/01/21 Javascript
移动端 一个简单易懂的弹出框
2016/07/06 Javascript
用iframe实现不刷新整个页面上传图片的实例
2016/11/18 Javascript
AngularJS表格样式简单设置方法示例
2017/03/03 Javascript
AngularJS实时获取并显示密码的方法
2018/02/06 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
nodejs用gulp管理前端文件方法
2018/06/24 NodeJs
微信接入之获取用户头像的方法步骤
2019/09/23 Javascript
[59:07]海涛为你详解DOTA2新版本“贤哲秘契”
2014/11/22 DOTA
使用Python脚本将文字转换为图片的实例分享
2015/08/29 Python
python 判断矩阵中每行非零个数的方法
2019/01/26 Python
Python tkinter实现简单加法计算器代码实例
2020/05/13 Python
PyQt5实现简单的计算器
2020/05/30 Python
python opencv实现简易画图板
2020/08/27 Python
Python爬虫之Selenium实现键盘事件
2020/12/04 Python
CSS3对图片照片进行边缘模糊处理的实现
2018/08/08 HTML / CSS
澳大利亚免息网上购物:Shop Zero
2016/09/17 全球购物
企业三严三实学习心得体会
2014/10/13 职场文书
2015年酒店客房部工作总结
2015/04/25 职场文书
公司酒会致辞
2015/07/30 职场文书
《自己的花是让别人看的》教学反思
2016/02/19 职场文书
开学季:喜迎新生,迎新标语少不了
2019/11/07 职场文书
python 机器学习的标准化、归一化、正则化、离散化和白化
2021/04/16 Python
Python Numpy之linspace用法说明
2021/04/17 Python
用python自动生成日历
2021/04/24 Python