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校验，错误信息提示也多为固定不变。

Angular8实现简单表单验证的代码实例

智能化校验

表单一旦开始有具体的细节校验或者复杂的业务参杂，校验提示必须准确、清晰。
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;
 }

}

构建出一个数据对象，以满足不同字段下不同错误类型的错误提示，根据业务需求，决定是否显示全部错误信息或者按照业务优先级显示。

Angular8实现简单表单验证的代码实例

其它细节

表单校验时机可以设置，默认为change,可选blur 、submit

表单验证正确的，想要提示勾号可以添加属性 nzHasFeedback

Angular8实现简单表单验证的代码实例

submit中那段代码是重新对表单进行验证了，一般验证中是不需要的，动态表单验证后续结合自定义表单服务进行演示。

看完上述内容，是不是对Angular8实现简单表单验证的代码实例有进一步的了解，如果还想学习更多内容，欢迎关注创新互联行业资讯频道。

标题名称：Angular8实现简单表单验证的代码实例
URL地址：http://ybzwz.com/article/jpjhje.html

Angular8实现简单表单验证的代码实例

其他资讯