【问题标题】:How to make a custom validation in Angular?如何在 Angular 中进行自定义验证?
【发布时间】:2021-04-10 18:43:57
【问题描述】:

我现在遇到自定义验证问题...

我有这个方法:

validateInstagram(): ValidatorFn {
    return (control: AbstractControl): ValidationErrors | null => {
      const value = control.value;
      let valid = false;

      if (!value) {
        return null;
      }

      let match = value.match(keys.ctrl_instagram_pattern);

      if(match === null || match![0] !== value) valid = false; else valid = true;

      console.log(valid ? { instaValid: true } : null);
      
      return valid ? { instaValid: true } : null;
    }
  }

此方法通过正则表达式验证 Instagram 帐户是否有效。

怎么看,在返回中,如果账号有效,则返回一个对象,否则返回一个null值。

问题是当字符串通过验证时,我得到了这个:

我得到 null 并且控制器状态是 VALID,但我认为它会倒退,它不会是?

根据这个逻辑,如果我在 return 中输入以下内容:

return valid ? null : { instaValid: true };

我得到了我想要的结果。

我该如何解决这个问题?

【问题讨论】:

  • 验证器函数旨在仅在验证失败时返回一个对象。因此,当前函数实际上是错误的,应该以语句 return valid ? null : { instaValid: false }; 结尾
  • Aaaaaaaahhhhh 好的...我以为是相反的...我认为验证函数在有效时会返回一个对象...非常感谢!

标签: angular typescript validation


【解决方案1】:

我这样使用它也许对你有帮助:

  /* Example form validation custom*/
itemInList(): ValidatorFn {
    return (control: AbstractControl): { [key: string]: any } | null => {
      if (control.value?.name) {
        const forbidden = this.list.find(itemList => itemList.name === control.value.name);
        return forbidden === undefined ? { notInList: { value: true } } : null;
      } else {
        return { notInList: { value: false } };
      }
    };
  }

【讨论】:

  • 这对我也有帮助!它遵循与 Olivier 评论相同的逻辑。也谢谢你!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2020-10-24
  • 1970-01-01
  • 2019-07-11
  • 2018-09-19
  • 2019-01-07
  • 2019-09-05
  • 1970-01-01
相关资源
最近更新 更多