微客导航 » 文章资讯 » Angular8基础应用之表单及其验证

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

2023-08-17 20:22:04 241

一、前提

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

二、正文

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

1、新建名称为formValidator的ng项目——命令行输入ngnewformValidator；

2、修改pakage.json文件——添加参数，方便开发，命令行输入npmstart启动项目；

"scripts":{
"ng":"ng",
"start":"ngserve--open--port4210",//修改端口号&自动打开默认浏览器窗口
"build":"ngbuild",
"test":"ngtest",
"lint":"nglint",
"e2e":"nge2e"
},

3、新建组件，命令行输入nggctemplateForm--specfalse；

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、新建指令，用于验证nggcdshare/verifyName

2、在share目录下新建nameValidator.ts，用于书写验证函数

//share/nameValidator.ts

import{ValidatorFn,AbstractControl}from"@angular/forms";

exportfunctionnameValidator(nameList:string[]):ValidatorFn{
return(control:AbstractControl):{[key:string]:any}|null=>{
//依据指令中传递进来的名称列表进行判断，如果包含，就返回一个对象，对象的key将
//作为模板（template-form.html）中被验证的控件的erros的key，如果不包含返回null
//表示验证通过
returnnameList.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
}]
})
exportclassVerifyNameDirectiveimplementsValidator{//实现Validator接口

@Input('appVerifyName')//接收验证规则（reg）,或者你希望传到指令中的什么
nameList:string[];

validate(control:AbstractControl):{[key:string]:any}|null{
returnthis.name?nameValidator(nameList)(control):null
}
}

三、碎碎念

如果只有一个表单或者项目比较小巧，用这样的验证机制，我认为是不太明智的（用ng都没必要），随便弄个计数器或者标识位就能达到dirty和touched的效果，反之，大概率上没有一个项目有一万个表单控件，定义9000个验证规则的，所以可以高度复用，而且维护起来也灵活一些

总结

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

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐