将动态 FormGroup 值复制到 Angular [Reactive Forms] 中的数据 class

Question

我在 Angular.

中使用 Reactive Forms 创建了动态表单

能够动态删除和创建字段。

但是当尝试通过 onSubmit 获取提交表单的值时，我在模型 classes.

中得到空值

    export class CreateListComponent implements OnInit {

       sdklist: FormGroup;

       ngOnInit() {
        this.sdklist = new FormGroup({
          SDKCollection: new FormArray([
            this.initFirstChild(),
          ]),
        });
      }

      initFirstChild() {
        return new FormGroup({
          sdkTitle: new FormControl(''),
          sdkId: new FormControl(''),
          sdkresourceId: new FormControl(''),
          sdkdescription: new FormControl(''),
          sdkimageName: new FormControl(''),
          ads: new FormArray([
           this.initSecondChild(),
          ]),
        });
      }

      private initSecondChild() {
        return new FormGroup({
         adTitle: new FormControl(''),
         adTag: new FormControl(''),
         });
      }
      onSubmit(form) {
        console.log('OnSubmit');
        console.log(this.sdklist.value);//Values are printed in console.

        var newSDKCollection : SDKCollection = this.sdklist.value;//SDKCollection is my data class

        console.log(newSDKCollection.sdkTitle);//value coming as null
        console.log(newSDKCollection.sdkId);//value coming as null

      }
    }

    //SDKCollection pojo
    export class SDKCollection{
      sdkTitle : string;
      sdkId : string;
      sdkresourceId : string;
      sdkdescription : string;
      ads : {
        [key : string] : ads
      }
    }

    //ads pojo
    export class ads{
      adTitle: string;
      adTag: string;
    }

我的angular版本如下

因为我得到的值低于 null，所以我无法将此模型 class 发送到我的后端并继续。

console.log(newSDKCollection.sdkTitle);//value coming as null
console.log(newSDKCollection.sdkId);//value coming as null

this.sdklist.value 的控制台日志正确显示值：

我错过了什么！

Answer 1

您必须使用 this.sdklist.getRawValue() 而不是 this.sdklist.value。

Answer 2

所以我想出了解决这个问题需要做些什么。

我引入了一个相同目标类型的新对象。并抄下这些值。喜欢以下并能够继续。

export class CreatesdklistComponent implements OnInit {
   ...
   sdklist: FormGroup;
   newSDKMainCollection : SDKMainCollection = {} as any;


   ...
    onSubmit() {
    console.log('OnSubmit');
    this.sdkCollectionModel = this.sdklist.get('SDKCollection').value;

    this.newSDKMainCollection.sdkCollectionName = this.sdkSetName;
    this.newSDKMainCollection.sdkCollection = this.sdkCollectionModel;

    //This displays all the required data correctly.
    console.log(this.newSDKMainCollection);
    }
}

不知道为什么在没有引入新对象的情况下这不起作用。怀疑这个问题是不是由于动态创建表单造成的。

将动态 FormGroup 值复制到 Angular [Reactive Forms] 中的数据 class

Copy dynamic FormGroup values to data class in Angular [Reactive Forms]

dynamicform

angular

angular-reactive-forms