Angular小坑（一）响应式表单validator中minlength匹配undefined问题

本文链接：https://blog.csdn.net/AzeShinja/article/details/106601441

Angular小坑（一）响应式表单validator中minlength匹配undefined问题

首先，我当时出现这个问题的时候真的懵懵的找了挺久才找到的问题，在这里和大家分享一下

首先先说一下我遇到的问题

下面是之前错误的代码

 validationMessages = {
    name: {
      required: '需要填写用户名',
      minLength: '用户名不能少于2个字节',
      maxLength: '用户不能多余10字节',
      forbidddenname: '不能起低素质的名字'
    }
 }
this.loginForm = this.fb.group({
      name: ['', [
        Validators.required,
        Validators.minLength(2),
        Validators.maxLength(10),
        forbiddenNameValidator(/shabi/i)
      ]

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xeR3LWeh-1591511788456)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200607142752308.png)]$

我写的验证信息required是正常显示 “需要填写用户名”

但是一到输入最小字节不能超过二的时候，我自己写的信息编程Undefined了，相当迷惑

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Jia0INGp-1591511788463)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200607143037541.png)]$

后来博主吧minLength 换成了 min 发现是可以正常得到我写的报错字符串

然后就陷入沉思，我就把minLength 换成了都是小写的 minlength，最后成功

下面是成功的代码

 validationMessages = {
    name: {
      required: '需要填写用户名',
      minlength: '用户名不能少于2个字节',
      maxlength: '用户不能多余10字节',
      forbidddenname: '不能起低素质的名字'
    },
    pwd: {
      required: '需要填写密码'
    }
  };

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UpZXq7re-1591511788467)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200607143446733.png)]$