欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Angular8 简单表单验证的实现示例

程序员文章站 2022-03-07 09:25:37
简单表单校验傻瓜式校验直接复制antd中demo

简单表单校验

傻瓜式校验

直接复制antd中demo

<form nz-form [nzlayout]="'inline'" [formgroup]="validateform" (ngsubmit)="submitform()">
 <nz-form-item>
  <nz-form-control nzerrortip="please input your username!">
   <nz-input-group nzprefixicon="user">
    <input formcontrolname="username" nz-input placeholder="username" />
   </nz-input-group>
  </nz-form-control>
 </nz-form-item>
 <nz-form-item>
  <nz-form-control nzerrortip="please input your password!">
   <nz-input-group nzprefixicon="lock">
    <input formcontrolname="password" nz-input type="password" placeholder="password" />
   </nz-input-group>
  </nz-form-control>
 </nz-form-item>
 <nz-form-item>
  <nz-form-control>
   <button nz-button nztype="primary" [disabled]="!validateform.valid">log in</button>
  </nz-form-control>
 </nz-form-item>
</form>
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为例,除了为必填项,必然需要符合某种格式,亦或是指定邮箱格式等,那么校验必须同时反映出错误类型,本例假设用户名有长度要求进行演示。

<nz-form-control [nzerrortip]="geterrtipbyfield('username')">
   <nz-input-group nzprefixicon="user">
    <input formcontrolname="username" nz-input placeholder="username" />
   </nz-input-group>
  </nz-form-control>
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,可选blursubmit

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

Angular8 简单表单验证的实现示例

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

到此这篇关于angular8 简单表单验证的实现示例的文章就介绍到这了,更多相关angular8 表单验证内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!