Создание вложенных элементов в Angular 2

Question

Я пытаюсь создать компонент, который интегрируется с реактивной формой.Поскольку это конкретное поле будет многократно использоваться в приложении, мне действительно поможет, если мне удастся его создать.Идея в том, что у меня есть форма на странице (это ионный проект), эта страница будет содержать FormGroup.Внутри этой страницы я вставлю компонент, передав ему FormGroup и путь, ведущий к нему.

Форма:

form: FormGroup = new FormGroup({
        group1: new FormGroup({
          group2: new FormGroup({
            control: new FormControl('')
          })
        })
      });

Если я, например, хотел пройти внизэлемент управления 'control' для компонента, я бы использовал директиву @Input () для передачи переменной формы и другой переменной, которая бы выглядела примерно так:

[
  {ctrl: 'group1', type: 'group'}, 
  {ctrl: 'group2', type: 'group'}, 
  {ctrl: 'control', type: 'control'}
]

Внутри компонента результат должен бытьthis:

<form [formGroup]="form">
  <div [formGroup]="controlPath.ctrl[0]">
    <div [formGroup]="controlPath.ctrl[1]">
      <ion-item>
        <ion-input [formControl]="controlPath.ctrl[2]"></ion-input>
      </ion-item>
    </div>
  </div>
</form>

Проблема, я не могу придумать ничего, что могло бы помочь мне с созданием div-форм formGroup, не выписывая их вручную.Если кто-нибудь знает более простой способ сделать это, я буду признателен.

Answer 1

вам, вероятно, нужен рекурсивный компонент.Во-первых, немного измените формат ваших данных, чтобы сделать их рекурсивными:

[
  {ctrl: 'group1', type: 'group', children:
                        [ {ctrl: 'group2', type: 'group', children: 
                                        [{ctrl: 'control', type: 'control'}]}
]}]

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

теперь ваш компонент может быть определен как: nested-form-component

       <div *ngFor='let item of formInfo' >
         <ion-item *ngIf='item.type==='control' >
            <ion-input [formControlName]="item.control"></ion-input>
          </ion-item>
          <div  *ngIf='item.type==='group' [formGroupName]= "item.control" >
         <nested-form-component   
           [formGroup]="form.controls[item.control]"  [formInfo]= "item.children" > 
         </nested-form-component>
        </div>
      <div>

Я даю входные данные для компонента 2, экземпляр formGroup form и formInfo, которые представляют собой переформатированные выше данные.

Теперь в вашем хостинг-компоненте

Создайте экземпляр formGroup form на основе данных formInfo и в шаблон вставьте

  <form  [formGroup]="form">
     <nested-form-component  [formGroup]="form"  [formInfo]= "formInfo" > 
         </nested-form-component>
   <form>