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 相关文章推荐
解决FireFox下[使用event很麻烦]的问题
Nov 26 Javascript
Prototype 学习 工具函数学习($w,$F方法)
Jul 12 Javascript
js 获取子节点函数 (兼容FF与IE)
Apr 18 Javascript
javascript:json数据的页面绑定示例代码
Jan 26 Javascript
使用JavaScript实现连续滚动字幕效果的方法
Jul 07 Javascript
jquery实现的Banner广告收缩效果代码
Sep 02 Javascript
js时间戳转为日期格式的方法
Dec 28 Javascript
js仿淘宝评价评分功能
Feb 28 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
Apr 28 Javascript
vuex(vue状态管理)的特殊应用案例分享
Mar 03 Javascript
vue移动端下拉刷新和上滑加载
Oct 27 Javascript
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
Oct 05 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 array_map()数组函数使用说明
2011/07/12 PHP
php异步多线程swoole用法实例
2014/11/14 PHP
Dwz与thinkphp整合下的数据导出到Excel实例
2014/12/04 PHP
CI框架的安全性分析
2016/05/18 PHP
Zend Framework数据库操作方法实例总结
2016/12/11 PHP
PHP里面把16进制的图片数据显示在html的img标签上(实现方法)
2017/05/02 PHP
PHP token验证生成原理实例分析
2019/06/05 PHP
Laravel 类和接口注入相关的代码
2019/10/15 PHP
JS应用之禁止抓屏、复制、打印
2008/02/21 Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
2012/01/13 Javascript
Uglifyjs(JS代码优化工具)入门 安装使用
2020/04/13 Javascript
jquery封装的对话框简单实现
2013/07/21 Javascript
Javascript异步编程模型Promise模式详细介绍
2014/05/08 Javascript
深入理解JavaScript系列(28):设计模式之工厂模式详解
2015/03/03 Javascript
浅谈JS中的bind方法与函数柯里化
2016/08/10 Javascript
JavaScript中Number对象的toFixed() 方法详解
2016/09/02 Javascript
AngularJS实现根据变量改变动态加载模板的方法
2016/11/04 Javascript
vue+element实现批量删除功能的示例
2018/02/28 Javascript
小程序清理本地缓存的方法
2018/08/17 Javascript
详解vue移动端项目的适配(以mint-ui为例)
2018/08/17 Javascript
详解js访问对象的属性和方法
2018/10/25 Javascript
Vue中的基础过渡动画及实现原理解析
2018/12/04 Javascript
vue祖孙组件之间的数据传递案例
2020/12/07 Vue.js
python标准算法实现数组全排列的方法
2015/03/17 Python
python+django加载静态网页模板解析
2017/12/12 Python
python中如何使用分步式进程计算详解
2019/03/22 Python
Python collections模块的使用方法
2020/10/09 Python
最新PyCharm从安装到PyCharm永久激活再到PyCharm官方中文汉化详细教程
2020/11/17 Python
加拿大高尔夫超市:Golf Town
2018/01/12 全球购物
南非最大的在线时尚商店:Zando
2019/07/21 全球购物
Sony C++笔试题
2013/03/10 面试题
党员干部承诺书范文
2014/03/25 职场文书
人事行政主管岗位职责
2015/04/09 职场文书
2015年物流客服工作总结
2015/07/27 职场文书
CSS实现隐藏搜索框功能(动画正反向序列)
2021/07/21 HTML / CSS
js前端设计模式优化50%表单校验代码示例
2022/06/21 Javascript