Angular8如何实现表单及其验证-创新互联
小编给大家分享一下Angular8如何实现表单及其验证，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
成都创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：成都网站设计、网站制作、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的
高台网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！
正文
（一）、新建表单（模板表单）
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
}
}以上是“Angular8如何实现表单及其验证”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联成都网站设计公司行业资讯频道！
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
当前题目：Angular8如何实现表单及其验证-创新互联
网页路径：
http://kswjz.com/article/csjoep.html
