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，{ {1}}是输入框标签。.如何在每个部分的前面单独显示父标题（人名（具有名和姓），个人详细信息（具有电子邮件和手机））。 ..

我想按照下面的顺序分别分配标题，分别分配标题。

人名

Last Name

个人详细信息

 -> First Name
 -> Last Name

如果我对上述方法有误，请帮助我拆分此https://stackblitz.com/edit/angular-x4a5b6-geesde动态形式，如下所示。.

我的表单需要看起来像这样https://stackblitz.com/edit/angular-zc34qr，但它必须是纯角度动态表单和JSON加载。.

请帮助我创建一个-> Email -> Mobile Number组，例如Personal Details，它已经创建并且可以正常工作了。

长期困扰我，请帮忙...

Answer 1

我不明白您为什么在这里创建其他formGroup：

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

只需使用从服务中获得的formGroup：

dynamic-form.component.ts

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>

Forked Stackblitz

角度动态形式，具有从JSON获取的元素组

1 个答案: