Angular响应式表单中如何实现FormControl允许空值、拒绝全空格输入？

当前验证器没有对两类“空”场景做区分：

• 符合你要求的允许留空状态：字段无任何输入，值为null/undefined/长度为0的空字符串
• 你需要拦截的违规状态：用户主动输入了一整串空白字符，值为类似' '的字符串

原逻辑直接对值做trim判断，把两类场景都判定为违规，才会出现纯空值也被拦截的问题，全程不需要逐字符遍历字符串判断，只要增加前置的空值豁免逻辑即可。

import { AbstractControl, ValidationErrors } from '@angular/forms';

export function whiteSpaceValidator(control: AbstractControl): ValidationErrors | null {
  // 前置豁免：完全留空的合法场景直接跳过校验
  if (control.value === null || control.value === undefined || control.value === '') {
    return null;
  }
  // 存在实际输入内容时，判断是否为全空白构成的输入
  const trimmedContent = control.value.trim();
  return trimmedContent === '' ? { 'whiteSpaceCheck': { value: control.value } } : null;
}

• 当字段处于纯空值状态时，会直接命中前置豁免判断，返回null跳过校验，符合非必填字段的留空要求
• 当用户输入了全是空白字符的内容时，值为非空的带空格字符串，不会命中豁免判断，会通过trim逻辑识别为违规输入，触发whiteSpaceCheck校验错误
• 整个逻辑没有逐字符遍历操作，完全基于值的类型判断和原生字符串trim能力实现，性能和可读性都更优

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