角度中的反应式表单禁用表单控制值无法动态更改

Question

我有一个带有表单控件的响应式表单，该表单控件具有禁用属性，但是当我尝试使用补丁值更改其值时，它以“未定义”结尾。

这是表单，当用户输入开始日期和持续时间时，我会自动更改结束日期，因此我需要禁用它：

 this.newProcessForm = new FormGroup({
  'start_date':new FormControl(null, Validators.required),
  'end_date':new FormControl({value: null, disabled: true}, Validators.required),
  'ex_duration':new FormControl(null, Validators.required),
})

这是我更改值的地方：

const newEndDate = this.dCalc.SubTaskEndDateCalculation(this.newProcess).toLocaleDateString();
this.newProcessForm.patchValue({
  'end_date' : newEndDate
}) 

它正确地显示在模板上，但是当我提交表单时，该字段的值返回未定义，如下图

Answer 1

它的工作原理是在模板中使用只读属性并从表单控件中删除禁用的属性。

所以代码是

this.newProcessForm = new FormGroup({
  'start_date':new FormControl(null, Validators.required),
  'end_date':new FormControl(null, Validators.required),
  'ex_duration':new FormControl(null, Validators.required),
})

模板中的 mat-input

<input type="text" matInput id="end_date" formControlName="end_date" readonly>