Angular8如何实现表单及其验证

小编给大家分享一下Angular8如何实现表单及其验证，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

创新互联自2013年创立以来，先为张家口等服务建站，张家口等地企业，进行企业商务咨询服务。为张家口企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

正文

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

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 发请求') } ...

//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; }; }

//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 } }

新网创想网站建设，新征程启航

Angular8如何实现表单及其验证

其他资讯