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 相关文章推荐
jquery中获取select选中值的代码
Jun 27 Javascript
jquery随机展示头像代码
Dec 21 Javascript
jQuery中append()方法用法实例
Jan 08 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
Mar 10 Javascript
js实现图片无缝滚动
Dec 23 Javascript
使用jquery提交form表单并自定义action的实现代码
May 25 Javascript
详解JavaScript树结构
Jan 09 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
Sep 18 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
富文本编辑器vue2-editor实现全屏功能
May 26 Javascript
使用JS监听键盘按下事件(keydown event)
Nov 07 Javascript
Vue实现多页签组件
Jan 14 Vue.js
浅谈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 之入门篇
2006/12/04 PHP
PHP开发入门教程之面向对象
2006/12/05 PHP
[原创]PHP中通过ADODB库实现调用Access数据库之修正版本
2006/12/31 PHP
PHP的5个安全措施小结
2012/07/17 PHP
ThinkPHP之用户注册登录留言完整实例
2014/07/22 PHP
Yii使用技巧大汇总
2015/12/29 PHP
PHP调用其他文件中的类
2018/04/02 PHP
jQuery使用手册之一
2007/03/24 Javascript
Javascript 面向对象 重载
2010/05/13 Javascript
浅谈javascript的数据类型检测
2010/07/10 Javascript
jQuery初学:find()方法及children方法的区别分析
2011/01/31 Javascript
JavaScript学习笔记之数组去重
2016/03/23 Javascript
jQuery图片切换动画特效
2016/11/02 Javascript
基于JavaScript实现轮播图原理及示例
2020/04/10 Javascript
深入理解Javascript中的观察者模式
2017/02/20 Javascript
webpack学习--webpack经典7分钟入门教程
2017/06/28 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
2018/11/20 Javascript
JavaScript canvas实现雪花随机动态飘落
2020/02/08 Javascript
[02:38]DOTA2亚洲邀请赛 IG战队巡礼
2015/02/03 DOTA
学习python (2)
2006/10/31 Python
在Python中用keys()方法返回字典键的教程
2015/05/21 Python
Python numpy 点数组去重的实例
2018/04/18 Python
pycharm安装和首次使用教程
2018/08/27 Python
详解python with 上下文管理器
2020/09/02 Python
全球最大的跑步用品商店:Road Runner Sports
2016/09/11 全球购物
加拿大最大的书店:Indigo
2017/01/01 全球购物
香港优质食材和美酒专门店:FoodWise
2017/09/01 全球购物
Haglöfs瑞典官方网站:haglofs火柴棍,欧洲顶级户外品牌
2018/10/18 全球购物
Hunkemöller瑞士网上商店:欧洲最大的内衣品牌之一
2018/12/03 全球购物
毕业生毕业总结的自我评价范文
2013/11/02 职场文书
保证书格式范文
2014/04/28 职场文书
公司法定代表人授权委托书
2014/09/29 职场文书
试用期工作表现自我评价
2015/03/06 职场文书
2015年社区纪检工作总结
2015/04/21 职场文书
JavaScript继承的三种方法实例
2021/05/12 Javascript
Matlab如何实现矩阵复制扩充
2021/06/02 Python