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 相关文章推荐
input的focus方法使用
Mar 13 Javascript
js location.replace与location.reload的区别
Sep 08 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
Sep 27 Javascript
查询json的数据结构的8种方式简介
Mar 10 Javascript
jQuery实现加入购物车飞入动画效果
Mar 14 Javascript
jQuery子窗体取得父窗体元素的方法
May 11 Javascript
vue多级多选菜单组件开发
Sep 08 Javascript
微信小程序 request接口的封装实例代码
Apr 26 Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
May 03 Javascript
ES6使用export和import实现模块化的方法
Sep 10 Javascript
js根据需要计算数组中重复出现某个元素的个数
Jan 18 Javascript
微信小程序新手教程之页面打开数量限制
Mar 03 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
详解HTTP Cookie状态管理机制
2016/01/14 PHP
JavaScript 指导方针
2007/04/05 Javascript
JavaScript Undefined,Null类型和NaN值区别
2008/10/22 Javascript
Jquery 设置标题的自动翻转
2009/10/03 Javascript
一段实现页面上的图片延时加载的js代码
2010/02/11 Javascript
JavaScript 注册事件代码
2011/01/27 Javascript
jQuery实现图片信息的浮动显示实例代码
2013/08/28 Javascript
javascript连续赋值问题
2015/07/08 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
2015/08/05 Javascript
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
2016/06/07 Javascript
javascript运算符——逻辑运算符全面解析
2016/06/27 Javascript
js制作支付倒计时页面
2016/10/21 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
2016/12/14 Javascript
微信小程序后台解密用户数据实例详解
2017/06/28 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
2020/06/02 Javascript
javascript实现京东快递单号的查询效果
2020/11/30 Javascript
[37:22]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第一局
2016/02/28 DOTA
[01:05:41]EG vs Optic Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
[05:26]TI10典藏宝瓶套装外观展示
2020/07/03 DOTA
Python中文分词工具之结巴分词用法实例总结【经典案例】
2017/04/15 Python
Mac 上切换Python多版本
2017/06/17 Python
pandas数值计算与排序方法
2018/04/12 Python
Python 按字典dict的键排序,并取出相应的键值放于list中的实例
2019/02/12 Python
Python Web框架之Django框架文件上传功能详解
2019/08/16 Python
dpn网络的pytorch实现方式
2020/01/14 Python
快速解决Django关闭Debug模式无法加载media图片与static静态文件
2020/04/07 Python
浅谈Tensorflow加载Vgg预训练模型的几个注意事项
2020/05/26 Python
html5 sessionStorage会话存储_动力节点Java学院整理
2017/07/06 HTML / CSS
Andrew Marc官网:设计师外套的领先制造商
2019/10/30 全球购物
意大利领先的奢侈品在线时装零售商:MCLABELS
2020/10/13 全球购物
计算机科学系职业生涯规划书
2014/03/08 职场文书
珍惜资源保护环境的建议书
2014/05/14 职场文书
助人为乐好少年事迹材料
2014/08/18 职场文书
学生不讲诚信检讨书
2014/09/29 职场文书
人事文员岗位职责
2015/02/04 职场文书
SpringBoot实现quartz定时任务可视化管理功能
2021/08/30 Java/Android