在角度 FormGroup 上设置值不起作用
Posted
技术标签:
【中文标题】在角度 FormGroup 上设置值不起作用【英文标题】:Setting a value on angular FormGroup does not work 【发布时间】:2021-05-17 00:17:11 【问题描述】:我正在开发一个 Angular 10 应用程序
我有一个@ng-stack FormGroup(在全局上它的行为与@angular FormGroup 相同),我用以下方式实例化
export abstract class AbstractBeanForm
static build(route: ActivatedRoute, defaultValue?: Partial<DeepRequired<GlobalIhmBean>> ): FormGroup<DeepRequired<GlobalIhmBean>>
let formGroup = new FormGroup<DeepRequired<GlobalIhmBean>>(
property1: new FormControl(""),
property2: new FormControl(""),
collection3: new FormArray<DataIhmBean>([])
);
const values3 = [
prop1: '2', prop2: '00', prop3: 'P', prop4: 0,
prop1: '', prop2: '01', prop3: 'P', prop4: 0,
prop1: '', prop2: '03', prop3: 'P', prop4: 0,
prop1: '', prop2: '05', prop3: 'P', prop4: 0,
prop1: '', prop2: '06', prop3: 'P', prop4: 0,
prop1: '', prop2: '07', prop3: 'P', prop4: 0,
prop1: '', prop2: '08', prop3: 'P', prop4: 0,
prop1: '', prop2: '09', prop3: 'P', prop4: 0
]
let formArray1 = formGroup.get('collection3') as any;
values3.forEach(function(value)
console.log('value');
console.log(value);
let formGroupi = new FormGroup(
prop1: new FormControl(''),
prop2: new FormControl(''),
prop3: new FormControl(''),
prop4: new FormControl(0)
);
console.log('formGroupi BEFORE setValue');
console.log(formGroupi);
formGroupi.setValue(value);
console.log('formGroupi AFTER setValue');
console.log(formGroupi);
formArray1!.push(formGroupi);
)
formGroup.setControl('collection3', formArray1);
defaultValue 具有以下 collection3 值
collection3: (1) […]
0: …
prop1: "2"
prop2: "09"
prop3: "P"
prop4: 0
DataIhmBean 如下
export interface DataIhmBean
prop1: string;
prop2: string;
prop3: string;
prop4: number;
在“values3.forEach(function(value) ..”这行代码中,第一个值符合预期 prop1: '2', prop2: '00', prop3: 'P', prop4: 0 (VALUE1)
好奇地排队 console.log('formGroupi BEFORE setValue'); console.log(formGroupi);
我有以下值:value: Object prop1: "2", prop2: "09", prop3: "P", ... 而我还没有设置默认值
设置VALUE1后(formGroupi.setValue(value); (value=VALUE1-> prop1: '2', prop2: '00', prop3: 'P', prop4: 0))
仍然好奇地排队 console.log('formGroupi AFTER setValue'); console.log(formGroupi);
我有以下值:value: Object prop1: "2", prop2: "09", prop3: "P",
太疯狂了,我不能设置formGroupi的值。不考虑 我必须补充一点,defaultValue 是我在上一步中保存在表单上的值 你有解释吗?我怎样才能摆脱这个问题?
更新
我按照你说的做了,结果报错了
TypeError: cyclic object value
在下一行,
console.log('formGroupi BEFORE setValue');
console.log(JSON.parse(JSON.stringify(formGroupi )));
【问题讨论】:
【参考方案1】:我终于找到了答案。日志记录是错误的,因为我记录了 formGroup 的引用,我不知道为什么,引用给了我错误的值,而记录值本身给了我正确的值
【讨论】:
以上是关于在角度 FormGroup 上设置值不起作用的主要内容,如果未能解决你的问题,请参考以下文章