具有禁用表单控制值的角度反应形式不能动态更改答案

【问题标题】：reactive forms in angular with disabled form control value cannot be changed dynamically具有禁用表单控制值的角度反应形式不能动态更改
【发布时间】：2021-06-26 02:17:58
【问题描述】：

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

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

 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
})

它正确显示在模板上，但是当我提交表单时，该字段的值返回 undefined 像这样 img enter image description here

【问题讨论】：

标签： angular-reactive-forms angular11

【解决方案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>

【讨论】：