angular - 如何在 Angular 中进行自定义验证？

Question

我现在对自定义验证有疑问...

我有这个方法：

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并且控制器状态为VALID，但我认为它会倒退，不会吗？

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

return valid ? null : { instaValid: true };

我得到了我想要的结果。

我怎样才能解决这个问题？

标签： angulartypescriptvalidation

Answer 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 } };
      }
    };
  }