为什么Angular响应式表单中number类型输入框为空时值为null？

行为差异原因 #

这个差异是Angular内置NumberValueAccessor（数值类型值访问器）的刻意设计：

• 原生HTML5中<input type="number">为空时返回空字符串''，但空字符串不属于合法数值类型，Angular为了统一数值类型的语义，会自动将空输入、无法解析为数值的输入统一转换为null，减少开发者处理类型边界的冗余代码。
• 你初始化FormControl时传入的初始值是空字符串''，但只要输入框触发过交互（比如用户输入后再清空），值访问器就会把值覆盖为null，所以你需要在校验器中同时兼容初始状态的空字符串和交互后的null两种场景。

代码优化方案 #

如果想要简化校验逻辑，可以在初始化表单控件时直接将初始值设为null，不需要额外传空字符串：

function createFromGroup() {
  return new FormGroup({
    min: new FormControl(null, /* custom validator */),
  });
}

后续校验器只需要判断null即可，不需要再额外判断空字符串：

const customValidator = (): ValidatorFn => {
  return (control: AbstractControl): ValidationErrors | null => {
    // 宽松相等会同时匹配 null 和 undefined 两种空状态，覆盖所有无输入的场景
    if (control.value == null) return null;
    // 其余自定义校验逻辑
  };
};

内容的提问来源于stack exchange，提问作者Seong Jin Kim