Angular 5中value与ngValue的差异及响应式表单null值问题

最近在使用Angular 5响应式表单时，我碰到了一个超出预期的小坑：当给select控件的默认选项绑定null值时，服务器接收到的居然是字符串"null"，而非我期望的null值。

问题场景复现 #

如果直接在<select>标签里用[value]="null"绑定默认选项，比如这样写：

<select formControlName="status">
  <option [value]="null">未选择</option>
  <option value="active">激活</option>
  <option value="inactive">禁用</option>
</select>

提交表单后会发现，status字段实际传递的是字符串字面量"null"，完全不是我们想要的空值效果。

可行解决方案 #

改用Angular表单提供的[ngValue]指令来绑定null值，就能实现预期的null传递效果：

<select formControlName="status">
  <option [ngValue]="null">未选择</option>
  <option [ngValue]="'active'">激活</option>
  <option [ngValue]="'inactive'">禁用</option>
</select>

此时选中“未选择”选项提交表单，status字段会正确把null值传递给服务器。

背后的原因 #

• [value]是原生DOM的属性绑定，它只支持字符串类型的值。当你尝试绑定null时，Angular会自动将其转换为字符串"null"，这是DOM属性的类型限制导致的。
• [ngValue]是Angular为表单控件量身打造的绑定指令，它支持绑定任意类型的数据（包括null、对象、数字等），能准确将值同步到响应式表单控件中，不会做不必要的类型转换。

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