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 相关文章推荐
Extjs优化(二)Form表单提交通用实现
Apr 15 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
Sep 26 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
Mar 11 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
Jun 21 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
Sep 14 Javascript
完美解决IE不支持Data.parse()的问题
Nov 24 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
Apr 10 Javascript
基于vue实现swipe轮播组件实例代码
May 24 Javascript
vue移动UI框架滑动加载数据的方法
Mar 12 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
Jun 03 Javascript
vue 兄弟组件的信息传递的方法实例详解
Aug 30 Javascript
js代码实现轮播图
May 04 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
基于mysql的论坛(6)
2006/10/09 PHP
PHP 数组教程 定义数组
2009/10/23 PHP
php简单分页类实现方法
2015/02/26 PHP
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
2006/06/26 Javascript
js 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
2009/04/10 Javascript
Javascript的匿名函数小结
2009/12/31 Javascript
jQuery 常见操作实现方式和常用函数方法总结
2011/05/06 Javascript
javascript中String类的subString()方法和slice()方法
2011/05/24 Javascript
一个挺有意思的Javascript小问题说明
2011/09/26 Javascript
js清空form表单中的内容示例
2014/05/20 Javascript
用js的document.write输出的广告无阻塞加载的方法
2014/06/05 Javascript
JavaScript实现函数返回多个值的方法
2015/06/09 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
2016/05/10 Javascript
学习Javascript闭包(Closure)知识
2016/08/07 Javascript
如何提高Dom访问速度
2017/01/05 Javascript
Three.js开发实现3D地图的实践过程总结
2017/11/20 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
2018/01/02 Javascript
JS中call和apply函数用法实例分析
2018/06/20 Javascript
基于VUE实现的九宫格抽奖功能
2018/09/30 Javascript
JavaScript中filter的用法实例分析
2019/02/27 Javascript
JS实现的雪花飘落特效示例
2019/12/03 Javascript
[52:09]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第二场
2014/05/26 DOTA
[03:49]显微镜下的DOTA2第十五期—VG登基之路完美团
2014/06/24 DOTA
[50:22]完美盛典-2018年度红毯走秀
2018/12/16 DOTA
Python根据区号生成手机号码的方法
2015/07/08 Python
python利用socketserver实现并发套接字功能
2018/01/26 Python
python GUI库图形界面开发之PyQt5结合Qt Designer创建信号与槽的详细方法与实例
2020/03/08 Python
Pyside2中嵌入Matplotlib的绘图的实现
2021/02/22 Python
车库门开启器、遥控器和零件:Chamberlain
2019/04/09 全球购物
Belvilla法国:休闲度假房屋出租
2020/10/03 全球购物
个人职业生涯规划书1500字
2013/12/31 职场文书
房屋租赁协议书
2014/04/10 职场文书
教师节感谢信
2015/01/22 职场文书
建筑工程催款函
2015/06/24 职场文书
vite+vue3.0+ts+element-plus快速搭建项目的实现
2021/06/24 Vue.js
Vue.js中v-for指令的用法介绍
2022/03/13 Vue.js