角度動態形式，具有從JSON獲取的元素組

Question

我正在進行角度應用並構建角度動態形式。

在這里，我試圖將形式分為兩部分，例如“人名”和“個人詳細信息”。

對於“個人”，其名稱適用於分組，但對於“個人”詳細信息，其無效。

HTML ：

<div *ngIf="form">
  <div *ngFor="let question of questions" class="form-row" [formGroup]="form">
      <ng-container *ngIf="!question.children">
        <app-question [question]="question" [form]="form"></app-question>
      </ng-container>
      <ng-container *ngIf="question.controlType === 'group' && question.children && question.children.length > 0">
        <app-dynamic-group [questions]="question.children" [form]="form.controls[question.key]" [key]="question.key" [formControlName]="question.key"></app-dynamic-group>
      </ng-container>
  </div>
</div>

JSON ：

  jsonData: any = [
    {
      "elementType": "group",
      "key": "person_name",
      "children": [
        {
          "elementType": "textbox",
          "class": "col-12 col-md-4 col-sm-12",
          "key": "first_name",
          "label": "First Name",
          "type": "text",
          "value": "",
          "required": true,
          "minlength": 3,
          "maxlength": 20,
          "order": 1
        },
        {
          "elementType": "textbox",
          "class": "col-12 col-md-4 col-sm-12",
          "key": "last_name",
          "label": "Last Name",
          "type": "text",
          "value": "",
          "required": true,
          "order": 2
        }
     ],
    },
        {
      "elementType": "group",
      "key": "personal_details",
      "children": [
        {
          "elementType": "textbox",
          "class": "col-12 col-md-4 col-sm-12",
          "key": "email",
          "label": "Email",
          "type": "text",
          "value": "",
          "required": true,
          "minlength": 3,
          "maxlength": 20,
          "order": 1
        },
        {
          "elementType": "textbox",
          "class": "col-12 col-md-4 col-sm-12",
          "key": "mobile",
          "label": "Mobile",
          "type": "text",
          "value": "",
          "required": true,
          "order": 2
        }
     ],
    },
  ];

工作中的Stckblitz ： https : //stackblitz.com/edit/angular-x4a5b6-5uj52y

一切正常，工作正常。.已經為“個人”名稱及其工作建立了一個小組，但是對於“個人詳細信息”，我無法找到輸入框。

單個表格需要拆分，每個部分上方都有標題，這就是該表格的要求。

在這里{{question.key}}在每個輸入框上顯示名稱，但我只需要在頂部顯示“ Person Name 。因為它是父標題，其余的如First Name ， Last Name是輸入框標簽。如何在每個部分的前面單獨顯示父標題（“ 人名”（具有名字和姓氏），“個人詳細信息”（具有電子郵件和移動電話） ）...

我想分別按以下順序分別分配標題。

人名

 -> First Name
 -> Last Name

個人資料

 -> Email
 -> Mobile Number

如果我對上述方法有誤，請幫助我拆分此https://stackblitz.com/edit/angular-x4a5b6-geesde動態形式，如以下給定的方法。

我的表單需要看起來像這樣https://stackblitz.com/edit/angular-zc34qr，但是它必須是純角度動態表單和JSON加載。

請幫助我創建一個小組Personal Details例如已經創建並正在工作的“ Person Name 。

卡住了很長時間，請幫我...

Answer 1

我不明白您為什么在這里創建其他formGroup：

this.form = new FormGroup({main: innerForm});

只需使用從服務中獲取的formGroup：

動態表格。組件

this.form = this.qcs.toFormGroup(this.questions);

dynamic-form.component.html

<app-dynamic-group [questions]="questions" [form]="form"></app-dynamic-group>

現在，您無需在DynamicGroupComponent上實現ControlValueAccessor。 您將FormGroup傳遞給它，它應該足以動態生成表單。

dynamic-group.component.ts

@Component({
  selector: 'app-dynamic-group',
  templateUrl: './dynamic-group.component.html'
})
export class DynamicGroupComponent {
  @Input() form: FormGroup;

  @Input() questions: QuestionBase<any>[] = [];
}

dynamic-group.component.html

<div *ngFor="let question of questions" class="form-row">
    <app-question *ngIf="!question.children" [question]="question" [form]="form"></app-question>

    <app-dynamic-group 
       *ngIf="question.controlType === 'group' && question.children && question.children.length"
       [form]="form.get(question.key)"
       [questions]="question.children">
    </app-dynamic-group>
</div>

分叉的Stackblitz