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

Question

I have created dynamic form using Reactive Forms in Angular.

Able to delete and create fields as well dynamically.

But when trying to get values of submitted form through onSubmit , I am getting null values in model 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;
    }

My angular version is as follows

As I am getting below values as null, I am not able to send this model class to my backend and proceed with.

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

Console Log for this.sdklist.value shows values properly:

What am I missing!

Answer 1

So I figured out what needs to be done to resolve this.

I introduced a new object of same targeted type. And copied down the values. Like follows and was able to proceed.

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);
    }
}

Not sure why this did not worked without introduction of new object. Doubt if this problem was due to dynamic form creation.