建站
咨询
售后
建站咨询
Angular8实现简单表单验证的代码实例
这篇文章主要讲解了Angular8实现简单表单验证的代码实例，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。
成都创新互联是一家专注于成都网站制作、成都网站建设、外贸营销网站建设与策划设计,全州网站建设哪家好?成都创新互联做网站,专注于网站建设10多年,网设计领域的专业建站公司;建站业务涵盖:全州等地区。全州做网站价格咨询:18982081108
简单表单校验
傻瓜式校验
直接复制Antd中demo
validateForm!: FormGroup;
submitForm(): void {
for (const i in this.validateForm.controls) {
this.validateForm.controls[i].markAsDirty();
this.validateForm.controls[i].updateValueAndValidity();
}
}
constructor(private fb: FormBuilder) {}
ngOnInit(): void {
this.validateForm = this.fb.group({
userName: [null, [Validators.required]],
password: [null, [Validators.required]],
remember: [true]
});
}此类表单校验较为单一，或者要求比较低，通常即为required校验，错误信息提示也多为固定不变。
智能化校验
表单一旦开始有具体的细节校验或者复杂的业务参杂，校验提示必须准确、清晰。userName为例，除了为必填项，必然需要符合某种格式，亦或是指定邮箱格式等，那么校验必须同时反映出错误类型，本例假设用户名有长度要求进行演示。
export class SimpleFormComponent implements OnInit {
validateForm: FormGroup;
errMessageMap = {};
constructor(
private fb: FormBuilder
) { }
ngOnInit() {
this.errMessageMap = {
userName: {
required: 'please input your name!',
minlength: 'please input at least least 5 character'
},
password: {
required: 'please input your password!'
}
};
this.validateForm = this.fb.group({
userName: [null, [Validators.required, Validators.minLength(5)]],
password: [null, [Validators.required]],
remember: [true]
}, { updateOn: 'change' });
}
submitForm(): void {
if (this.validateForm.controls) {
for (const i in this.validateForm.controls) {
if (this.validateForm.controls[i]) {
this.validateForm.controls[i].markAsDirty();
this.validateForm.controls[i].updateValueAndValidity();
}
}
}
}
getErrTipByField(fieldName) {
const errors = this.validateForm.get(fieldName).errors;
let errMsg = '';
for (const key in errors) {
if (errors.hasOwnProperty(key)) {
errMsg += this.errMessageMap[fieldName][key];
}
}
return errMsg;
}
}构建出一个数据对象，以满足不同字段下不同错误类型的错误提示，根据业务需求，决定是否显示全部错误信息或者按照业务优先级显示。
其它细节
表单校验时机可以设置，默认为change,可选blur 、submit
表单验证正确的，想要提示勾号可以添加属性 nzHasFeedback
submit中那段代码是重新对表单进行验证了，一般验证中是不需要的，动态表单验证后续结合自定义表单服务进行演示。
看完上述内容，是不是对Angular8实现简单表单验证的代码实例有进一步的了解，如果还想学习更多内容，欢迎关注创新互联行业资讯频道。
本文标题：Angular8实现简单表单验证的代码实例
网页路径：http://lswzjz.com/article/jpjhje.html
