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

Я создал динамическую форму, используя 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 правильно показывает значения:

введите здесь описание изображения

Что я упускаю!


angular angular-reactive-forms dynamicform
person Sreehari    schedule 01.04.2019    source источник
comment
Попробуйте эти this.sdklist.value   -  person Bhagwat Tupe    schedule 01.04.2019
comment
Это уже пробовал. он не дает значений, отличных от null . кроме как при печати в консоли   -  person Sreehari    schedule 01.04.2019
comment
Попробуйте это.sdklist.getRawValue()   -  person Rajkumar Rathi    schedule 01.04.2019
comment
this.sdklist выглядит как массив. Итак, попробуйте foreach зациклить на newSDKCollection...   -  person Phantom    schedule 01.04.2019

Ответы (2)


arrow_upward
0
arrow_downward

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

person Caio Lorensetti    schedule 02.04.2019

arrow_upward
0
arrow_downward

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

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

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

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

person Sreehari    schedule 08.04.2019