angular форма с несколькими шагами и вложенными полями

Question

Я получил назначение на проект, который использует формы для создания форм. большинство из них представляют собой простые одностраничные формы или формы из jsonSchema. Меня попросили исследовать вложенные формы с помощью вкладок и т. Д. c.

https://stackblitz.com/edit/angular-ngx-formly-ouzzaa?file=app%2Fapp.component.html

Кажется, что он работает, за исключением того, что он не создает вложенные объекты в модели , Мне нужно получить что-то вроде этого:

{
   category1: {
      subcat1: {
         field1: 'value',
         field2: 'value'
      },
      subcat2: {
         field1: 'value',
         field2: 'value'
      }
   },
   category2: {
   ...
   }
}

Answer 1

Вам необходимо добавить FormGroup с FormArray следующим образом ...

  this.FormGroupName = fb.group({
    id: [null],
    //default form controls put here
    CatgoryList1: this.fb.group({
        List1: this.fb.array([
          this.fb.group({
            Field1: [null], //you can apply validation here
            Field2: [null]
          })
        ]),
        //and so on..
    }),
    CatgoryList2: this.fb.group({
        List2: this.fb.array([
          this.fb.group({
            Field3: [null],
            Field4: [null]
          })
        ]),
        //and so on..
    }),
    //and so on..
});  

Вы также можете динамически добавить sh в форму следующим образом ...

this.CatList.push(this.initCatListGroup_Cat1());


get CatList() {
    return this.FormGroupName.get('CatgoryList1').get('List1') as FormArray;
}

initCatListGroup_Cat1() {
    return this.fb.group({
      Field1: [null],
      Field2: [null]
    })
}

Надеюсь это полезно для вас. :)