Блог

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

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

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

     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, я не могу отправить этот класс модели в свой серверный сервер и продолжить.

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

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

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

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

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

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

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

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