Angular FormControl为何仅传入空字符串时验证器才存在？

核心原因：参数传错位置了 #

Angular的FormControl构造函数对参数顺序有明确要求，先看最常用的重载形式：

constructor(
  formState?: any, // 控件初始值，可选
  validatorOrOpts?: ValidatorFn | ValidatorFn[] | AbstractControlOptions | null, // 验证器/配置，可选
  asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null // 异步验证器，可选
);

第一种写法的问题

let a = new FormControl([Validators.required]);

这里你把[Validators.required]当成了**第一个参数（控件初始值）**传入，验证器参数（第二个位置）未指定，所以控件的验证器默认是null，此时控件的初始值实际是这个包含验证函数的数组，而非你期望的设置验证器。

第二种写法为什么正常

let a = new FormControl('', [Validators.required]);

这里第一个参数是空字符串（正确的初始值），第二个参数是验证器数组，完全符合构造函数的参数规则，所以验证器被正确赋值，控制台显示的ƒ (control)就是Validators.required对应的验证函数。

额外说明 #

如果想跳过初始值直接设置验证器，有两种正确写法：

• 显式传入null作为初始值：

  let a = new FormControl(null, [Validators.required]);
  

• 使用配置对象的方式（更清晰，适合同时设置多个配置）：

  let a = new FormControl({ value: null }, { validators: [Validators.required] });
  

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