Angular中自定义验证器无法正常工作问题求助

看起来你遇到的问题主要有两个核心原因，咱们一步步来解决：

1. 自定义验证器的逻辑错误 #

你写的验证器里用了indexOf('')——空字符串的indexOf在任何字符串（包括空字符串）里都会返回0，这就导致无论输入什么内容，这个验证器都会返回cannotContainSpace错误，哪怕没有空格。这是最关键的问题！

修正后的验证器应该检查空格（' '）：

static cannotContainSpace(control: AbstractControl): ValidationErrors | null {
  // 检查字符串中是否包含空格，加可选链避免value为空时报错
  if ((control.value as string)?.indexOf(' ') >= 0) {
    return { cannotContainSpace: true };
  }
  return null;
}

2. 模板错误提示的条件不完善 #

你给required和minlength的提示加了touched判断，但自定义验证的提示没加。页面刚加载时，表单控件还没被触碰过，此时如果验证器返回错误（因为之前的逻辑问题），提示就会直接显示出来。

修正后的错误提示模板应该和其他验证提示保持一致，加入touched（或dirty，根据你的需求选择）判断，同时用可选链避免errors为null时的报错：

<div *ngIf="form.get('username').touched && form.get('username').errors?.cannotContainSpace" class="alert alert-danger">
  There can be no spaces in Username.
</div>

额外优化建议 #

Angular表单控件提供了hasError方法，让代码更简洁易读，你可以把条件改成这样：

<div *ngIf="form.get('username').touched && form.get('username').hasError('cannotContainSpace')" class="alert alert-danger">
  There can be no spaces in Username.
</div>

这样调整后，验证器只会在输入包含空格时返回错误，而且错误提示只会在用户触碰过输入框后才显示，完美解决你遇到的问题~

内容的提问来源于stack exchange，提问作者aakriti priya