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的一些特性和用法整理小结
Jan 13 Javascript
jQuery UI 实现email输入提示实例
Aug 15 Javascript
使用node.js 获取客户端信息代码分享
Nov 26 Javascript
JavaScript声明变量名的语法规则
Jul 10 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
May 03 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
May 11 Javascript
JS查找数组中重复元素的方法详解
Jun 14 Javascript
基于对象合并功能的实现示例
Oct 10 Javascript
angular实现input输入监听的示例
Aug 31 Javascript
微信小程序实现banner图轮播效果
Jun 28 Javascript
Vue select 绑定动态变量的实例讲解
Oct 22 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
Nov 16 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实现的在线人员函数库
2008/04/09 PHP
使ecshop模板中可引用常量的实现方法
2011/06/02 PHP
PHP 利用AJAX获取网页并输出的实现代码(Zjmainstay)
2012/08/31 PHP
php mysql_real_escape_string addslashes及mysql绑定参数防SQL注入攻击
2016/12/23 PHP
php实现通过soap调用.Net的WebService asmx文件
2017/02/27 PHP
php实现简单加入购物车功能
2017/03/07 PHP
PHP获取php,mysql,apche的版本信息及更多服务器信息
2021/03/09 PHP
javascript 24小时弹出一次的代码(利用cookies)
2009/09/03 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
2013/02/02 Javascript
jQuery中filter()和find()的区别深入了解
2013/09/25 Javascript
JavaScript动态创建div属性和样式示例代码
2013/10/09 Javascript
zTree插件之单选下拉菜单实例代码
2013/11/07 Javascript
用js来刷新当前页面保留参数的具体实现
2013/12/23 Javascript
jQuery如何取id有.的值一般的方法是取不到的
2014/04/18 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
2015/06/24 Javascript
Jquery全选与反选点击执行一次的解决方案
2015/08/14 Javascript
jQuery EasyUI之DataGrid使用实例详解
2016/01/04 Javascript
Sea.JS知识总结
2016/05/05 Javascript
jQuery中$.each()函数的用法引申实例
2016/05/12 Javascript
详解vue-validator(vue验证器)
2017/01/16 Javascript
Javascript中构造函数要注意的一些坑
2017/01/23 Javascript
Webpack打包css后z-index被重新计算的解决方法
2017/06/18 Javascript
js + css实现标签内容切换功能(实例讲解)
2017/10/09 Javascript
vue1.0和vue2.0的watch监听事件写法详解
2018/09/11 Javascript
Python数据分析之双色球中蓝红球分析统计示例
2018/02/03 Python
Django自定义manage命令实例代码
2018/02/11 Python
Python 从一个文件中调用另一个文件的类方法
2019/01/10 Python
python把转列表为集合的方法
2019/06/28 Python
详解如何减少python内存的消耗
2019/08/09 Python
python 控制台单行刷新,多行刷新实例
2020/02/19 Python
Pytorch上下采样函数--interpolate用法
2020/07/07 Python
Python爬虫开发与项目实战
2020/12/16 Python
CSS3中颜色线性渐变实战
2015/07/18 HTML / CSS
公司合并协议书范本
2014/09/30 职场文书
乡镇安全生产月活动总结
2015/05/08 职场文书
社交电商模式的兴起:这些新的商机千万别错过
2019/07/26 职场文书