Angular8基础应用之表单及其验证


Posted in Javascript onAugust 11, 2019

一、前提

  • 必要性:特别必要
  • 意义:很有意义

二、正文

(一)、新建表单(模板表单)

1、新建名称为formValidator的ng项目——命令行输入ng new formValidator;

2、修改pakage.json文件——添加参数,方便开发,命令行输入npm start启动项目;

"scripts": {
 "ng": "ng",
 "start": "ng serve --open --port 4210",//修改端口号&自动打开默认浏览器窗口
 "build": "ng build",
 "test": "ng test",
 "lint": "ng lint",
 "e2e": "ng e2e"
 },

3、新建组件,命令行输入ng g c templateForm --spec false;

4、将app.components.html中的内容,替换成<app-template-form></app-template-form>

5、在app.module.ts中引入FormModul并在import中使用;

6、书写formValidator组件

//template-form.html
 <div class="container">
  <form (ngSubmit)="save()" #myForm="ngForm">
  <input 
   type="text" 
   [(ngModel)]="name" //双向数据绑定
   name="name" //使用form时必须定义,可以理解为当前控件的名字
   #myName="ngModel" //检查当前控件状态的出口,应用:myName.valid、myName.errors等
   autocomplete="off" //关闭浏览器自带的显示历史记录 h5新属性
   [appVerifyName]="nameList" //添加验证器
  >
  <!--invalid是否验证成功-->
  <!--dirty是否改变-->
  <!--touched是否被抚摸过-->
  <div *ngIf="myName.invalid && (myName.dirty || myName.touched)">
   <div *ngIf="myName.errors.required">
    名称为必填项
   </div>
   <div *ngIf="myName.errors.repeat">
    名称重复
   </div> 
  </div>
  <button type="submit" [disabled]="!myForm.form.valid">提交</button> //验证通过才能提交 
  </form>
 </div>
//template-form.ts
  ...
  
  name: string;
  
  nameAry:string[] = ['zhangsan','lisi','wangwu'];
  
  constructor() { }

  ngOnInit() {}
  
  save(): void{
    console.log('save 发请求')
  }
  ...

(二)、验证表单

1、新建指令,用于验证ng g c d share/verifyName

2、在share目录下新建nameValidator.ts,用于书写验证函数

//share/nameValidator.ts
  
  import { ValidatorFn, AbstractControl } from "@angular/forms";

  export function nameValidator(nameList: string[]): ValidatorFn {
    return (control: AbstractControl): { [key: string]: any } | null => {
      //依据指令中传递进来的名称列表进行判断,如果包含,就返回一个对象,对象的key将
      //作为模板(template-form.html)中被验证的控件的erros的key,如果不包含返回null
      //表示验证通过
      return nameList.includes(control.value) ? { 'repeat': { value: control.value } } : null;
    };
  }

3、书写指令——验证名称不能重复

//verify-name.directive.ts
  
  import { Directive, Input } from '@angular/core';
  import { Validator, NG_VALIDATORS, AbstractControl } from '@angular/forms';
  import { nameValidator } from './nameValidator';
  
  @Directive({
   selector: '[appVerifyName]',
   providers: [{
    provide: NG_VALIDATORS,
    useExisting: VerifyNameDirective,
    multi: true
   }]
  })
  export class VerifyNameDirective implements Validator { //实现Validator接口
  
   @Input('appVerifyName') //接收验证规则(reg),或者你希望传到指令中的什么
   nameList: string[];
  
   validate(control: AbstractControl): { [key: string]: any } | null {
    return this.name ? nameValidator(nameList)(control) : null
   }
  }

三、碎碎念

如果只有一个表单或者项目比较小巧,用这样的验证机制,我认为是不太明智的(用ng都没必要),随便弄个计数器或者标识位就能达到dirty和touched的效果,反之,大概率上没有一个项目有一万个表单控件,定义9000个验证规则的,所以可以高度复用,而且维护起来也灵活一些

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript 字符编码规则
May 04 Javascript
获取网站跟路径的javascript代码(站点及虚拟目录)
Oct 20 Javascript
判断用户是否在线的代码
Mar 05 Javascript
jquery多选项卡效果实例代码(附效果图)
Mar 23 Javascript
JavaScript限定复选框的选择个数示例代码
Aug 25 Javascript
基于jquery实现三级下拉菜单
May 10 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
Jul 19 Javascript
JS中async/await实现异步调用的方法
Aug 28 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
Sep 11 Javascript
js实现图片实时时钟
Jan 15 Javascript
vue实现购物车案例
May 30 Javascript
Javascript如何实现扩充基本类型
Aug 26 Javascript
浅谈javascript错误处理
Aug 11 #Javascript
axios异步提交表单数据的几种方法
Aug 11 #Javascript
node.js实现带进度条的多文件上传
Mar 27 #Javascript
基于Express框架使用POST传递Form数据
Aug 10 #Javascript
Vue实现点击显示不同图片的效果
Aug 10 #Javascript
vue+eslint+vscode配置教程
Aug 09 #Javascript
一个手写的vue放大镜效果
Aug 09 #Javascript
You might like
PHP匿名函数和use子句用法实例
2016/03/16 PHP
php学习笔记之mb_strstr的基本使用
2018/02/03 PHP
JQuery 应用 JQuery.groupTable.js
2010/12/15 Javascript
JS读取XML文件示例代码
2013/11/15 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
2014/10/14 Javascript
javascript关于运动的各种问题经典总结
2015/04/27 Javascript
jQuery实现复选框批量选择与反选的方法
2015/06/17 Javascript
jQuery实现文本框输入同步的方法
2015/06/20 Javascript
深入分析jsonp协议原理
2015/09/26 Javascript
JS实现的最简Table选项卡效果
2015/10/14 Javascript
全屏js头像上传插件源码高清版
2016/03/29 Javascript
Bootstrap table分页问题汇总
2016/05/30 Javascript
JavaScript生成验证码并实现验证功能
2016/09/24 Javascript
Javascript动画效果(3)
2016/10/11 Javascript
详解jQuery中的事件
2016/12/14 Javascript
self.attachevent is not a function的解决方法
2017/04/04 Javascript
微信小程序多张图片上传功能
2017/06/07 Javascript
jquery.validate表单验证插件使用详解
2017/06/21 jQuery
vue.js element-ui tree树形控件改iview的方法
2018/03/29 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
2019/04/23 Javascript
详解微信小程序-canvas绘制文字实现自动换行
2019/04/26 Javascript
socket在egg中的使用实例代码详解
2019/05/30 Javascript
js实现简单的倒计时
2021/01/28 Javascript
python实现类似ftp传输文件的网络程序示例
2014/04/08 Python
python遍历类中所有成员的方法
2015/03/18 Python
python粘包问题及socket套接字编程详解
2019/06/29 Python
基于Python模拟浏览器发送http请求
2020/11/06 Python
综合办公室主任职责
2013/12/16 职场文书
数学系个人求职信范文
2014/01/30 职场文书
房产代理公证处委托书
2014/04/04 职场文书
大学社团计划书
2014/05/01 职场文书
大学生简历求职信
2014/06/24 职场文书
上课说话检讨书
2015/01/27 职场文书
返乡农民工证明
2015/06/24 职场文书
如何书写授权委托书?
2019/06/25 职场文书
详解OpenCV获取高动态范围(HDR)成像
2022/04/29 Python