如何以角度组合单一形式的两个部分? [英] How to combine two parts of single form in angular?

问题描述

我正在制作具有角度动态形式的角度应用程序，其中我正在通过 JSON 加载动态形式的数据..

JSON 有两部分，例如part 1 and part 2，

 jsonDataPart1: any = [{"elementType": "文本框","class": "col-12 col-md-4 col-sm-12","key": "project_name","label": "项目名称","类型": "文本",价值": ""，必需":假，最小长度":3，最大长度":20，订单":1},{"elementType": "文本框","class": "col-12 col-md-4 col-sm-12","key": "project_desc","label": "项目描述","类型": "文本",价值": ""，必需":真的，订单":2}]jsonDataPart2: 任何 = [{"elementType": "文本框","class": "col-12 col-md-4 col-sm-12","key": "property_one","label": "属性一","类型": "文本",价值": ""，必需":真的，订单":3},{"elementType": "文本框","class": "col-12 col-md-4 col-sm-12","key": "property_two","label": "属性二","类型": "文本",价值": ""，必需":真的，订单":4},{"elementType": "收音机","class": "col-12 col-md-3 col-sm-12","key": "property_required","label": "属性要求",选项": [{"key": "必需",值":必填"},{"key": "not_required",值":不需要"}],订单":5},{"elementType": "复选框","class": "col-12 col-md-3 col-sm-12","key": "property_check","label": "属性要求",订单":6}]

我将 JSON 作为单独的部分加载，

 ngOnInit() {//构建表单第一部分this.questions = this.service.getQuestions(this.jsonDataPart1)this.form = this.qcs.toFormGroup(this.questions);//构建表单第二部分this.questionsPartTwo = this.service.getQuestions(this.jsonDataPart2)this.formPartTwo = this.qcs.toFormGroupPartTwo(this.questionsPartTwo);}

HTML 看起来像，

<form (ngSubmit)="onSubmit()" [formGroup]="form"><h4><b>表格第一部分从这里开始</b><div *ngFor="let question of questions" class="form-row"><ng-容器><app-question [question]="question" [form]="form"></app-question></ng-容器>
<h4><b>表格第二部分从这里开始</b><div *ngFor="let partTwo of questionsPartTwo"><ng-容器><app-question [question]="partTwo" [form]="formPartTwo"></app-question></ng-容器>

<div class="form-row"><button type="submit" [disabled]="!form.valid">保存</button>

</表单><br><预>{{form?.value|json}}

我需要将这两者结合起来，并且需要为整个单一表单获得单一输出..

在我的实际应用程序中，我有两个 json 数据并分别加载每个数据并分配表单，因此请不要将第一部分和第二部分 json 分开..

让我在这里停止代码，因为它太长了你可能会感到困惑..

这是一个有效的 stackblitz: https://stackblitz.com/edit/angular-x4a5b6-2rykpo

只需采取一种解决方法 dynamic-form.component.ts 和 dynamic-form.component.html 你就会清楚我做了什么..

请帮助我将拆分后的 JSON 加载到 this.service.getQuestions 并获取两个部分并在最终输出中加入以提交..

如果我的方法有误，请帮助我纠正它，因为我是角度和动态形式的新手.它需要采用角度动态形式并且 json 只加载没有变化..

我期望的帮助是在提交表单时结合第 1 部分和第 2 部分..

请帮助我，我已经坚持了很长时间才摆脱它..

解决方案

你可以采取几种方法

1.-创建一个 formJoin，它是 {form1:questions of form1,form2:questions of form2}

在你的 ngOnInit

formJoin:FormGroup;ngOnInit(){this.questions = this.service.getQuestions(this.jsonDataPart1)this.form = this.qcs.toFormGroup(this.questions);this.questionsPartTwo = this.service.getQuestions(this.jsonDataPart2)this.formPartTwo = this.qcs.toFormGroup(this.questionsPartTwo);this.formJoin=new FormGroup({form1:this.form,form2:this.formPartTwo})}//在你的.html中<form (ngSubmit)="onSubmit()" [formGroup]="formJoin">

2.-在一个独特的json中加入问题

this.allquestions=this.service.getQuestions(this.jsonDataPart1.concat(this.jsonDataPart2));this.formJoin2=this.qcs.toFormGroup(this.allquestions);//获取第二种形式的第一个question.keythis.questionBreak=this.jsonDataPart2[0].key;//在你的.html中<form (ngSubmit)="onSubmit()" [formGroup]="formJoin2"><h4><b>一个 uniq 表单 </b><div *ngFor="let question of allquestions" class="form-row"><!--从第二个表格中休息一下--><ng-container *ngIf="question.key==questionBreak"><h4><b>表格第二部分从这里开始</b></ng-容器><ng-容器><app-question [question]="question" [form]="formJoin2"></app-question></ng-容器>

</表单>

重要提示:您不需要在服务中使用两个函数 toFormGroup 和 toFormGroupPartTwo.如果你看到的是同一个函数，你就用不同的参数喂"了这个函数，但它是同一个函数.

在stackblitz 将两个选项放在一起

更新更新代码以休息一下，

I am making angular application with angular dynamic form where i am loading data for dynamic form through JSON..

JSON has two parts such as part 1 and part 2,

  jsonDataPart1: any = [
    {
      "elementType": "textbox",
      "class": "col-12 col-md-4 col-sm-12",
      "key": "project_name",
      "label": "Project Name",
      "type": "text",
      "value": "",
      "required": false,
      "minlength": 3,
      "maxlength": 20,
      "order": 1
    },
    {
      "elementType": "textbox",
      "class": "col-12 col-md-4 col-sm-12",
      "key": "project_desc",
      "label": "Project Description",
      "type": "text",
      "value": "",
      "required": true,
      "order": 2
    }
  ]

  jsonDataPart2: any = [
            {
          "elementType": "textbox",
          "class": "col-12 col-md-4 col-sm-12",
          "key": "property_one",
          "label": "Property One",
          "type": "text",
          "value": "",
          "required": true,
          "order": 3
        },
        {
          "elementType": "textbox",
          "class": "col-12 col-md-4 col-sm-12",
          "key": "property_two",
          "label": "Property Two",
          "type": "text",
          "value": "",
          "required": true,
          "order": 4
        },
        {
          "elementType": "radio",
          "class": "col-12 col-md-3 col-sm-12",
          "key": "property_required",
          "label": "Property Required",
          "options": [
            {
              "key": "required",
              "value": "Required"
            },
            {
              "key": "not_required",
              "value": "Not Required"
            }
          ],
          "order": 5
        },
        {
          "elementType": "checkbox",
          "class": "col-12 col-md-3 col-sm-12",
          "key": "property_check",
          "label": "Property Required",
          "order": 6
        }
  ]

And i am loading the JSON as separate part like,

  ngOnInit() {
    //Building form first part
    this.questions = this.service.getQuestions(this.jsonDataPart1)
    this.form = this.qcs.toFormGroup(this.questions);

        //Building form second part
    this.questionsPartTwo = this.service.getQuestions(this.jsonDataPart2)
    this.formPartTwo = this.qcs.toFormGroupPartTwo(this.questionsPartTwo);
  }

And HTML looks like,

<div>
    <form (ngSubmit)="onSubmit()" [formGroup]="form">

 <h4> <b> Form Part One begins from here </b> </h4>
        <div *ngFor="let question of questions" class="form-row">
            <ng-container>
                <app-question [question]="question" [form]="form"></app-question>
            </ng-container>
        </div>

 <h4> <b> Form Part Two begins from here </b> </h4>

    <div *ngFor="let partTwo of questionsPartTwo">
                <ng-container>
                <app-question [question]="partTwo" [form]="formPartTwo"></app-question>

            </ng-container>
        </div>

        <div class="form-row">
            <button type="submit" [disabled]="!form.valid">Save</button>
    </div>
  </form> <br>

  <pre>
{{form?.value|json}}
</pre>
</div>

I need to combine these two and need to get single output for the whole single form..

In my real application i am having two json data and loading each separately and assigning form so please dont break out the part one and part two json..

Let me stop the code here as its getting long you might get confused..

Here is a working stackblitz: https://stackblitz.com/edit/angular-x4a5b6-2rykpo

Just take a workaround dynamic-form.component.ts and dynamic-form.component.html You will get clear what i have done..

Kindly help me to load the splitted JSON to this.service.getQuestions and get two parts and join both in final output to submit..

If i am wrong in approach kindly help me to correct it as i am new in angular and dynamic form.. It needs to be in angular dynamic form and json loading only no change in it..

Help i am expecting is from combining both parts 1 and 2 while submitting form..

Please help me i am stucking for a long to come out of it..

解决方案

You can take several aproach

1.-Create a formJoin that was {form1:questions of form1,form2:questions of form2}

In your ngOnInit

formJoin:FormGroup;
ngOnInit()
{
    this.questions = this.service.getQuestions(this.jsonDataPart1)
    this.form = this.qcs.toFormGroup(this.questions);

    this.questionsPartTwo = this.service.getQuestions(this.jsonDataPart2)
    this.formPartTwo = this.qcs.toFormGroup(this.questionsPartTwo);

    this.formJoin=new FormGroup({form1:this.form,form2:this.formPartTwo})
}

//In your .html 
<form (ngSubmit)="onSubmit()" [formGroup]="formJoin">

2.-Join the question in an unique json

this.allquestions=this.service.getQuestions(
        this.jsonDataPart1.concat(this.jsonDataPart2));
this.formJoin2=this.qcs.toFormGroup(this.allquestions);
//get the first question.key in the second form
this.questionBreak=this.jsonDataPart2[0].key;

//In your .html
<form  (ngSubmit)="onSubmit()" [formGroup]="formJoin2">

 <h4> <b> An uniq Form </b> </h4>
    <div *ngFor="let question of allquestions" class="form-row">
       <!--make a break fro the secondForm-->
       <ng-container *ngIf="question.key==questionBreak">
           <h4> <b> Form Part Two begins from here </b> </h4>
       </ng-container>
        <ng-container>
            <app-question [question]="question" [form]="formJoin2"></app-question>
        </ng-container>
    </div>
 </form>

IMPORTANT NOTE: You needn't have two functions in service toFormGroup and toFormGroupPartTwo. If you see is the same function, you "feed" the function with different arguments, but is the same function.

In the stackblitz has the two options together

Update update code to make a break,

这篇关于如何以角度组合单一形式的两个部分?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！