Скопируйте динамические значения FormGroup в класс данных в Angular [Reactive Forms]

Question

Я создал динамическую форму, используя Reactive Forms в Angular.

Возможность динамического удаления и создания полей.

Но при попытке получить значения отправленной формы через onSubmit, яполучение нулевых значений в модельных классах.

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

Моя угловая версия выглядит следующим образом

По мере получениязначения ниже нуля, я не могу отправить этот класс модели в свой бэкэнд и продолжить.

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

Журнал консоли для this.sdklist.value показывает значения правильно:

Чего мне не хватает!

Answer 1

Итак, я понял, что нужно сделать, чтобы решить эту проблему.

Я ввел новый объект того же целевого типа. И скопировал значения. Вроде следует и смог продолжить.

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

Не уверен, почему это не сработало без введения нового объекта. Сомневаюсь, что эта проблема была из-за динамического создания формы.

Answer 2

Вы должны использовать this.sdklist.getRawValue() вместо this.sdklist.value.