具有从 JSON 获取的元素组的 Angular 动态表单

Posted 2023-03-13

【中文标题】具有从 JSON 获取的元素组的 Angular 动态表单

【英文标题】：Angular dynamic form with groups of elements getting from JSON

【发布时间】：2019-04-20 19:19:03

【问题描述】：

我正在做角度应用和角度动态形式的构建。

在这里，我试图将表单拆分为两部分，例如人名和个人详细信息..

对于人名，它可以用于分组，但对于个人详细信息，它不起作用。

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。

卡在这很长一段时间，请帮助我...

【问题讨论】：

JSON 中没有“人名”文本，那么如果在组级别再添加一个字段，例如“groupTitle:“人名”，那么如何证明它会很好？很容易在 UI 上显示。在您的动态表单中，仅验证或其他一些验证也会在不久的将来出现？

@AjayOjha，我在每个组中都给出了key .. 你可以在 service.ts 中看到 ``` "elementType": "group", "key": "person_name",`` `

@AjayOjha，将来不会有任何验证..

【参考方案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

【讨论】：

感谢您的回答.. 我想将各自的标题放在每个部分上方.. 您已将表格分成两部分，如何将标题放在上方.. 先说 Person Name框和Personal Details 作为我需要显示的标题的第二个框.. 还提到了这个有问题的..

更新示例stackblitz.com/edit/…