如何设置Date对象为指定值且不影响其他绑定的日期字段

问题根因 #

你遇到的问题是两个日期输入框的name属性重复导致的。你当前代码里两个<input>控件的name都设置为了trip-start，Angular 配合ngModel做表单双向绑定时，会以同表单下的name属性作为控件的唯一识别标识，重复的name会导致两个输入框绑定到同一个控件实例，因此修改任意一个输入框的值都会同步更新另一个。

解决方法 #

只需要把两个输入框的name属性修改为各自唯一的值即可，修改后的HTML代码参考如下：

<div id=idDateOfPesticideSpray class="date">Date:
    <input  type="date" id="idDataOfSpray" [(ngModel)]="iDatePasser.dateOfSpray" (ngModelChange)="onDateChangedDateOfSpray($event)" name="dateOfSpray"
        value="2021-07-21"
        min="2021-01-01" max="2090-12-31">
</div>

<div id=idDateOfApproval class="date">Date of approval:
    <input  type="date" id="dateOfApproval" [(ngModel)]="iDatePasser.dateOfApproval" (ngModelChange)="onDateChangedDateOfApproval($event)" name="dateOfApproval"
        value="2021-07-21"
        min="2021-01-01" max="2090-12-31">
</div>

如果修改后问题仍然存在，可以检查下iDatePasser对象初始化时，dateOfSpray和dateOfApproval两个属性是否错误指向了同一个引用对象，确保两个属性是独立的值即可。

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