时间戳

首页 > 解决方案 > 在角度 FormGroup 上设置值不起作用

angular - 在角度 FormGroup 上设置值不起作用

问题描述

我正在开发一个 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'); 控制台.log(formGroupi);

我有以下值： value: Object { prop1: "2", prop2: "09", prop3: "P", ... } 虽然我还没有设置 defaultValue

设置 VALUE1 后 (formGroupi.setValue(value); (value=VALUE1->{ prop1: '2', prop2: '00', prop3: 'P', prop4: 0}))

仍然好奇地在 console.log('formGroupi AFTER setValue'); 控制台.log(formGroupi);

我有以下值：值：对象 { prop1：“2”，prop2：“09”，prop3：“P”，

太疯狂了，我无法设置formGroupi的值。没有考虑到我必须补充一点，defaultValue 是我在上一步中保存在表单上的值你有解释吗？我怎样才能摆脱这个问题？

更新

我做了你说的并得到了错误

TypeError: cyclic object value

在下一行，

  console.log('formGroupi BEFORE setValue');
  console.log(JSON.parse(JSON.stringify(formGroupi )));

标签： angularangular-reactive-forms

解决方案

最后我找到了答案。日志记录是错误的，因为我记录了 formGroup 的引用，我不知道为什么，引用给了我错误的值，而记录值本身给了我正确的值

推荐阅读