将输入分组为数组
Posted
技术标签:
【中文标题】将输入分组为数组【英文标题】：Group the inputs as array 【发布时间】：2019-04-24 08:26:37 【问题描述】：我正在使用角度动态形式制作角度应用程序。这里我正在制作我有一个选择框的表单。
点击选择框我想生成需要数组的输入框..
这里连文本框的生成都不起作用..
HTML
<div *ngFor="let item of array">
item.value is the parent
<div *ngFor="let child of item.templateChild">
child.property_name
<input type="text" [value]="child.property_name">
<div *ngFor="let partThree of questionsParthree">
<ng-container>
<app-question [question]="partThree" [form]="formPartThree"></app-question>
</ng-container>
</div>
</div>
</div>
TS：
this.questionsPartThree = this.service.getQuestions(element);
console.log(values);
this.formPartThree = this.qcs.toFormGroup(this.questionsPartThree);
this.formJoin = new FormGroup( form1: this.form, form2: this.formPartTwo, template_data: this.formPartThree );
尝试在上面列出的 html 中创建 formArray，但我收到错误为 cannot find control name template_properties。
为了混淆和提出不清楚的问题，我已经减少了代码和你将在演示中获得的所有内容..
工作中的堆栈闪电战： https://stackblitz.com/edit/angular-x4a5b6-wyqdzn
表单的当前输出是，
"form1":
"project_name": "",
"project_desc": ""
,
"form2":
"property_one": "",
"property_two": ""
,
"template_data":
"template_details": [
"Propertyone": "",
"Propertytwo": "",
"Propertythree": "",
"Propertyfour": "",
"Propertyfive": ""
]
预期输出：
"form1":
"project_name": "",
"project_desc": ""
,
"form2":
"property_one": "",
"property_two": ""
,
"template_details" : [
"template_name": "Template One",
"templateChild" : ["property_one": "", "property_two":""]
,
"template_name": "Template Two",
"templateChild" : ["property_three": "", "property_four":"",
"property_five":""]
]
如果我选择了多个选项（因为选择框是多选），以下内容预计会在template_properties 内形成。
表单分三部分，第一部分和第二部分不要管。选择框只和第三部分有关。
请参考上面的预期输出以获得 JSON 格式的结构.. 如果我选择两个，那么它不应该替换它应该在数组 template_properties.. 中获取多个对象的值p>
"template_name": "Template One",
"templateChild" : ["property_one": "", "property_two":""]
,
"template_name": "Template Two",
"templateChild" : ["property_three": "", "property_four":"",
"property_five":""]
苦苦挣扎，但我无法找到正确的解决方案。任何有角的人请帮助我使用demo 实现当前输出的预期输出..
【问题讨论】：
【参考方案1】：只需将“template_details”创建为具有 FormGroups 的 FormArray，每个组都有“tenplate_name”FormControl 和“template_child”FormArray。
用这个替换你的动态表单组件：
import Component, Input, OnInit from '@angular/core';
import FormGroup, FormArray, FormControl, AbstractControl from '@angular/forms';
import QuestionBase from './question-base';
import QuestionControlService from './question-control.service';
import QuestionService from './question.service';
@Component(
selector: 'app-dynamic-form',
templateUrl: './dynamic-form.component.html',
providers: [QuestionControlService]
)
export class DynamicFormComponent implements OnInit
@Input() questions: QuestionBase<any>[] = [];
@Input() questionsPartTwo: QuestionBase<any>[] = [];
@Input() questionsPartThree: QuestionBase<any>[] = [];
form: FormGroup;
formPartTwo: FormGroup;
formPartThree: FormGroup;
formJoin: FormGroup;
formJoin2: FormGroup;
payLoad = '';
allquestions: QuestionBase<any>[] = [];
selectItems: any;
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
]
persons = [
key: 1, value: "Template one",
personOneChild: [
property_name: "Property one" ,
property_name: "Property two"
]
,
key: 2, value: "Template two",
personTwoChild: [
property_name: "Property three" ,
property_name: "Property four" ,
property_name: "Property five"
]
,
key: 3, value: "Template three",
personThreeChild: [
property_name: "Property six" ,
property_name: "Property seven"
]
]
array: any[] = [];
constructor(private service: QuestionService, private qcs: QuestionControlService)
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 );
changeEvent(e)
this.array = [];
for (let select of this.selectItems)
let propertiesArray = [];
this.array.forEach(element =>
element.templateChild.forEach(data =>
propertiesArray.push(
key: data.property_name.replace(' ',''),
label: data.property_name,
"elementType": "textbox",
"type": "text"
)
);
);
let values:any[]=propertiesArray.map(x=>x.key);
let element=[
"elementType": "array",
"key": "template_details",
"value":values,
"children":propertiesArray
]
this.questionsPartThree = this.service.getQuestions(element);
console.log(values);
this.formPartThree = this.buildForm(+select) as AbstractControl;
this.formJoin = new FormGroup( form1: this.form, form2: this.formPartTwo, template_data: this.formPartThree );
buildForm(selecteVal: number)
switch (selecteVal)
case 1:
return new FormArray([
new FormGroup(
template_name: new FormControl("Template One"),
template_child: new FormArray([
new FormGroup(
property_one: new FormControl("property one"),
property_two: new FormControl("property two"),
)
]),
)
])
case 2:
return new FormArray([
new FormGroup(
template_name: new FormControl("Template One"),
template_child: new FormArray([
new FormGroup(
property_three: new FormControl("property three"),
property_four: new FormControl("property four"),
)
]),
)
])
break;
case 3:
return new FormArray([
new FormGroup(
template_name: new FormControl("Template One"),
template_child: new FormArray([
new FormGroup(
property_five: new FormControl("property five"),
property_six: new FormControl("property six"),
)
]),
)
])
break;
onSubmit()
this.payLoad = JSON.stringify(this.form.value);
/*
Copyright 2017-2018 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
【讨论】：
感谢您的回复.. 你能用它制作一个有效的堆栈闪电战吗.. 我已经尝试在我列出的 html 部分中创建表单数组，但它说找不到名称为template_details 的控件..请帮助我并使用我提供的堆栈闪电战..
你去吧，我用一个可行的解决方案更新了我的问题......我希望这就是你的意思。
不，这不是我想要的。如果我选择模板一和模板二，那么它应该就像我给出的预期输出一样。在你的中，它正在替换较新的模板。
应该是template_properties..内的多个对象..以上是关于将输入分组为数组的主要内容，如果未能解决你的问题，请参考以下文章