简单单校验证傻瓜式校直联复制Antd中demo登录validateForm!:FormGroup;submitForm():void{for(constiinthis.validateForm.controls){this.validateForm.controls[i].markAsDirty();this.validateForm.controls[i].updateValueAndValidity();}}constructor(privatefb:FormBuilder){}ngOnInit():void{this.validateForm=this.fb.group({用户名:[null,[Validators.required]],密码:[null,[Validators.required]]],记住:[true]});}这类表单验证比较简单,或者说要求比较低,一般都是需要验证,报错信息提示大多是固定的。一旦智能验证表单开始有特定的详细验证或复杂的业务,验证提示必须准确清晰。以userName为例。除了是必填项外,还必须符合一定的格式,或者指定email格式等,那么验证必须同时反映错误??类型。本例中假设用户名有长度要求进行演示。导出类SimpleFormComponent实现OnInit{validateForm:FormGroup;errMessageMap={};constructor(privatefb:FormBuilder){}ngOnInit(){this.errMessageMap={userName:{required:'请输入您的姓名!',minlength:'请至少输入5个字符'},password:{required:'请输入您的密码!}};this.validateForm=this.fb.group({用户名:[null,[Validators.required,Validators.minLength(5)]],密码:[null,[Validators.required]],记住:[true]},{updateOn:'更改'});}submitForm():void{if(this.validateForm.controls){for(constiinthis.validateForm.controls){if(this.validateForm.controls[i]){this.validateForm.controls[i].markAsDirty();this.validateForm.controls[i].updateValueAndValidity();}}}}getErrTipByField(fieldName){consterrors=this.validateForm.get(fieldName).errors;让errMsg='';for(constkeyinerrors){if(errors.hasOwnProperty(key)){errMsg+=this.errMessageMap[fieldName][key];}}返回错误信息;}}构造数据对象,满足不同字段不同错误类型的错误提示。根据业务需要,决定是显示所有错误信息还是按业务优先级显示其他细节。表单验证时机可以设置,默认是change,可选blur,提交表单验证正确,如果要提示打勾可以添加属性nzHasFeedback提交。submit中的代码是重新校验form,一般校验不需要。动态表单验证后面会结合自定义表单服务进行演示。