Angular中date输入框绑定数据库日期后提交值为空是什么原因

问题根因 #

该问题是Angular响应式表单中同时使用formControlName和[value]绑定引发的取值不同步：

• 绑定formControlName的表单控件，值完全由对应FormControl实例管理，[value]属性绑定只会修改输入框的视图层显示，不会同步更新FormControl的存储值
• 数据库返回的生日仅通过[value]渲染到了日历视图，对应的FormControl未被赋值，因此提交表单时取到的FormControl值为空

解决方案 #

可任选以下两种方案修复：

方案1（推荐，保留响应式表单逻辑） #

移除HTML中的[value]绑定，在组件拿到接口返回的person数据后，直接给对应FormControl赋值：
组件代码示例：

// 拿到person数据后执行赋值逻辑
this.yourFormName.get('date').setValue(this.person.date);

HTML代码简化为：

<input type="date" nbInput fullWidth fieldSize="small" formControlName="date">

Angular会自动适配date输入框的格式要求，无需额外通过date管道转换格式。

方案2（改用模板驱动表单） #

移除formControlName，改用[(ngModel)]实现双向绑定：

<input type="date" nbInput fullWidth fieldSize="small" [(ngModel)]="person.date" name="date">

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