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

前端  /  管理员 发布于 4年前   245

一、前提

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

二、正文

（一）、新建表单（模板表单）

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中的内容，替换成

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

6、书写formValidator组件

 //template-form.html 
  
          
   
    名称为必填项      
    名称重复        提交 //验证通过才能提交    

  //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个验证规则的，所以可以高度复用，而且维护起来也灵活一些

总结

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

您可能感兴趣的文章:

• AngularJS实现表单验证
• AngularJS使用ngMessages进行表单验证
• AngularJS实现表单手动验证和表单自动验证
• 详解AngularJS实现表单验证
• Angular2表单自定义验证器的实现
• angular实现表单验证及提交功能
• AngularJS中实现用户访问的身份认证和表单验证功能
• AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
• 详解AngularJS中的表单验证(推荐)
• 强大的 Angular 表单验证功能详细介绍