Angular8 简单表单验证

简单表单校验

傻瓜式校验

直接复制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校验,错误信息提示也多为固定不变。
image.png

智能化校验

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

}

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

其它细节

表单校验时机可以设置,默认为change,可选blursubmit
表单验证正确的,想要提示勾号可以添加属性 nzHasFeedback
image.png
submit中那段代码是重新对表单进行验证了,一般验证中是不需要的,动态表单验证后续结合自定义表单服务进行演示。


前端成长之踩坑经验
前端在开发中扮演者什么样得角色?可有可无?无足轻重?花里胡哨?应该是杂乱有章

前端路上摸爬滚打;野路子前端debug

106 声望
6 粉丝
0 条评论
推荐阅读
Angular8表单内置API窥探
目前表单是响应式类型,默认change状态进行校验,且初始值均为 空值(推荐使用null替代'')现在需求有所变动,申请单默认团建费用初始值设为1001,但是公司今年效益不是很好,要求团建费用不得大于1000.

何弃疗2阅读 2.1k

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木60阅读 6k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.2k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木41阅读 7.1k评论 6

CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(&gt;^ω^&lt...

XboxYan42阅读 2.8k评论 14

封面图
还在用 JS 做节流吗?CSS 也可以防止按钮重复点击
举个例子:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,比如只允许每300ms提交一次,这时候我想大部分同学都会到网上直接拷贝一段throttle函数,或者直接引用lodash工具库

XboxYan34阅读 2.2k评论 2

封面图
【关于Javascript】--- 正则表达式篇
基础知识一、元字符 {代码...} 二、量词 {代码...} 三、集合 字符类 {代码...} 四、分支 {代码...} 五、边界 开始结束 {代码...} 六、修饰符 {代码...} 七、贪婪模式和非贪婪模式js默认贪婪模式即最大可能的匹配...

Jerry35阅读 2.9k

前端路上摸爬滚打;野路子前端debug

106 声望
6 粉丝
宣传栏