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

Question

我有这样的东西

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 设置值？

Answer 1

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

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

您可以使用 works like:

的 patchValue

Use the patchValue() method to replace any properties defined in the object that have changed in the form model.

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

这样您可以保留引用但仅更新 endTime

的值

Answer 2

应该是

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

Answer 3

由于您在另一个 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')
 }

此 returns 控件然后您可以为

等控件设置值

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

Answer 4

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

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

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

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

Insert value in formgroup reactive forms

angular

angular-reactive-forms

formgroups