Angular7使用FormBuilder patchValue修改字段丢失原有值问题

问题产生原因 #

这个现象的本质是Angular 7响应式表单的控件值同步逻辑和HTML原生输入框的值类型限制不匹配导致的，具体可以拆解为两点：

• HTML原生文本输入框的value属性仅支持字符串类型，无法识别null值。当FormControl初始值设为null时，Angular会自动把null转换为空字符串显示在输入框中，但此时FormControl存储的实际值和DOM层显示值存在隐式的类型差异。
• 调用patchValue回填接口返回的字符串值（包括空字符串）后，未修改的控件的dirty、touched状态仍然为初始的false。当修改另一个输入框时，会触发整个表单的变更检测与状态同步，Angular会对未触碰的控件做值一致性校验：发现控件初始值为null，和当前DOM层的空字符串判定为"无用户主动修改"，就会将FormControl的值重置为初始的null，导致原有值丢失。

当把表单字段初始值改为空字符串""后，FormControl初始值的类型和原生输入框的value类型完全匹配，状态同步时不会出现类型不匹配导致的误重置，未修改字段的值就可以正常保留。

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