在表单组反应形式中插入值

Posted 2023-03-13

【中文标题】在表单组反应形式中插入值

【英文标题】：Insert value in formgroup reactive forms

【发布时间】：2020-04-16 00:42:25

【问题描述】：

我有这样的事情

let formGroup = new FormGroup(
  operationalAM: new FormGroup(
    endTime: new FormControl('')
  ),
  operationalPM: new FormGroup(
    startTime: new FormControl('')
  )
);

我正在尝试像这样将值设置为 endTime 和 startTime

formGroup.controls.operationalAM.value.endTime.setValue('1300');
formGroup.controls.operationalPM.value.startTime.setValue('');

但我有错误

TypeError：formGroup.controls.operationalAM.value.endTime.setValue 不是函数

有人知道如何在 formGroup 中为 formGroup 设置值吗？

【问题讨论】：

表单控件需要getter

查看我分享的演示。

【参考方案1】：

你也可以使用 patchValue 方法如下：

 formGroup.patchValue(
 operationalAM: (
 endTime:'1'
 ),
operationalPM:(
 startTime:'2'
)
);

您无需在此处指定所有字段，只需指定您需要的字段 来源：这个Question

【参考方案2】：

由于您在另一个 formGroup 中有 formGroup，您应该必须在内部 formGroup 中引用控件

formGroup.controls.get('operationalAM.startTime').setValue('1300');
formGroup.controls.get('operationalPM.endTime').setValue('');

第二种方式是使用getter

喜欢

 get startTime()
  return this.yourform.get('operationalAM.startTime')
 
 get endTime()
  return this.yourform.get('operationalPM.endtime')
 

这将返回控件，然后您可以为控件设置值，例如

this.yourform.get('endtime').setValue(value);

【讨论】：

错误：不应该直接实例化

【参考方案3】：

您可以像这样在控件中设置值：

formGroup.controls.get('operationalAM').setValue( endTime: '1300' );
formGroup.controls.get('operationalPM').setValue( startTime: '1300' );

你可以使用works like的patchValue:

使用 patchValue() 方法替换对象中定义的任何属性，这些属性在表单模型中已更改。

formGroup.controls.get('operationalAM').patchValue( endTime: '1300' );

这样你可以保留引用但只更新endTime的值

【讨论】：

错误：必须为表单控件提供一个值，名称为：'endTime'。

不应该直接实例化

什么意思？你可以使用 patchValue 来改变 endTime。

直接针对控件并不是一个好的做法，另外 - 我很惊讶这个答案实际上有效（您不需要第一次引用“控件”）。我认为唯一“正确”的方法是：formGroup.get(['operationalAM', 'endTime']).setValue('1300')。

【参考方案4】：

应该是

formGroup.controls.operationalAM.controls.endTime.setValue('1300');
formGroup.controls.operationalPM.controls.startTime.setValue('');

【讨论】：

“AbstractControl”类型上不存在属性“控件”.ts(2