如何以角度组合单一形式的两个部分？
Posted
技术标签:
【中文标题】如何以角度组合单一形式的两个部分？【英文标题】：How to combine two parts of single form in angular? 【发布时间】：2019-04-22 04:13:52 【问题描述】：我正在使用角度动态表单制作角度应用程序，我正在通过 JSON 加载动态表单的数据..
JSON有part 1和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
]
我将 JSON 作为单独的部分加载，例如，
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);
html 看起来像，
<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>
我需要将这两者结合起来，并且需要为整个单个表单获取单个输出..
在我的真实应用程序中，我有两个 json 数据并分别加载并分配表单，所以请不要拆分第一部分和第二部分 json..
让我在这里停止代码，因为它会变得很长，你可能会感到困惑..
这是一个有效的 stackblitz： https://stackblitz.com/edit/angular-x4a5b6-2rykpo
只需采取解决方法dynamic-form.component.ts and dynamic-form.component.html 你会清楚我做了什么..
请帮助我将拆分后的 JSON 加载到 this.service.getQuestions 并获取两个部分并在最终输出中加入以提交..
如果我的方法有误，请帮助我纠正它，因为我是角度和动态形式的新手。它需要是角度动态形式，json 只加载没有变化。
我期待的帮助是在提交表单时结合第 1 部分和第 2 部分..
请帮助我，我坚持了很长时间才能摆脱它..
【问题讨论】：
您是在问如何将payload中的数据放在一起？意思是改变这一行：this.payLoad = JSON.stringify(this.form.value); 如果是这样，你应该可以这样做将它们组合在一起：this.payLoad = JSON.stringify( ...this.form.value, ...this.formPartTwo.value );
创建一个*** FormGroup，然后为每个 JSON 表单添加 2 个子 FormGroups。现在你有一个单一的表格 - 工作完成。
【参考方案1】：
你可以采取几种方法
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)
//In your .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);
//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>
重要提示：您不需要在服务 toFormGroup 和 toFormGroupPartTwo 中有两个函数。如果你看到的是同一个函数，你用不同的参数“喂”这个函数，但它是同一个函数。
在the stackblitz有两个选项一起
更新 更新代码来休息一下，
【讨论】：
Eliseo，谢谢，但我确实需要为上面的每个部分设置标题，如第 1 部分和第 2 部分的单独块。当我们有独特的形式时，是否可以给它？？ 而且你是对的，我可以拥有它是独一无二的，但是在每个部分的顶部（第 1 部分和第 2 部分）都有标题，只有我这样做......有没有其他方法。 . 希望你能帮忙.. 查看代码更新。我们有一个变量“questionBreak”等于第二个 jsonData 的第一个问题，以及带有 if (stackblitz.com/edit/angular-x4a5b6-bv8j8d) 的 ng-container Eliseo，可以不用动态表格试试吗，***.com/questions/53538849/…【参考方案2】：使用***表单并将您的子表单包装在父表单中并使用提供程序来使用现有表单
Parent.component.html
<form [formGroup]="form" (ngSubmit)="onClick();">
<h1>Part1</h1>
<div class="row" formArrayName="part1" *ngFor="let c of form['controls']['part1']['controls'];let i =index">
<div class="col">
<input [attr.type]="jsonDataPart1[i].type"
class="form-control" [attr.placeholder]="jsonDataPart1[i].label"
[formControlName]="i" >
</div>
</div>
<app-part2 [part2]="jsonDataPart2">
<h1>Part2</h1>
</app-part2>
<br>
<button class="btn btn-primary">Save</button>
</form>
child.component.ts
import Component, OnInit, Input from '@angular/core';
import FormGroup, FormControl, ControlContainer, FormGroupDirective, FormArray from '@angular/forms';
@Component(
selector: 'app-part2',
templateUrl: './part2.component.html',
styleUrls: ['./part2.component.css'],
viewProviders: [ provide: ControlContainer, useExisting: FormGroupDirective ]
)
export class Part2Component implements OnInit
@Input('part2') part2;
part2Form;
constructor(private parentForm: FormGroupDirective)
ngOnInit()
this.part2Form = this.parentForm.form;
const control = this.part2.map(d => new FormControl());
this.part2Form.addControl('part2F', new FormGroup(
part2: new FormArray(control)
))
例如：https://stackblitz.com/edit/angular-xrrabj
【讨论】：
以上是关于如何以角度组合单一形式的两个部分？的主要内容，如果未能解决你的问题，请参考以下文章