以角度形式将输入创建为数组 [英] Create inputs as array in angular form
问题描述
尽力而为，请帮帮我..
我正在制作一个有角度的动态形式，其中的形式总共分为三个部分，其中两个部分已经制作完成.现在我正在制作第三部分，这将通过从下拉列表中选择一个选项来生成...
连那些部分也完成了...
但我无法在其中创建表单数组...因为我是 angular 新手，请帮助我.
HTML:
表单第 3 部分将在这里，它将是数组
<选择多个(change)="changeEvent($event)"><option *ngFor="let opt of people" [value]="opt.key">{{opt.value}}</option></选择><div *ngFor="让数组项">{{item.value}} 是父项<div *ngFor="let child of item.templateChild">{{child.property_name}}<div *ngFor="let partThree of questionsPartthree"><ng-容器><app-question [question]="partThree" [form]="formPartThree"></app-question></ng-容器>选择框更改事件:
changeEvent(e) {如果(e.target.value == 1){this.array = [];this.array.push({键:1，值:模板一"，模板子:[{ property_name: "属性一" },{ property_name: "属性二" }]});让 propertiesArray = [];this.array.forEach(元素 => {element.templateChild.forEach(data => {propertiesArray.push({关键:data.property_name，标签:data.property_name，"elementType": "文本框",类型":文本"})});});this.questionsPartThree = this.service.getQuestions(propertiesArray);this.formPartThree = this.qcs.toFormGroup(this.questionsPartThree);this.formJoin = new FormGroup({ form1: this.form, form2: this.formPartTwo, form3: this.formPartThree });}}继续像第 1 部分和第 2 部分..
我已经发布了与单独创建表单数组相关的代码..
更新的 Stackblitz https://stackblitz.com/edit/角度-x4a5b6-mnyifs
在这里，如果我们选择任何选项，那么您将获得带有值的输入框..
我想用它创建数组，
如果我们选择第一个选项Template One，预期输出完全一样
"templateChild" : [{"property_one": "", "property_two":""}]因此，如果我从选择框中选择 Template One 和 Template Two(因为选择框是多选)，则整个表单的最终输出将是，
<代码>{形式1":{项目名": ""，"project_desc": ""},形式2":{"property_one": "",property_two":"},模板细节":[{ "template_name": "模板一","templateChild" : [{"property_one": "", "property_two":""}]},{ "template_name": "模板二","templateChild" : [{"property_three": "", "property_four":"","property_five":""}]}]}在 演示我已经提供并给了我一个更好的解决方案..
当我们从下拉列表中选择一个选项时，请帮助我创建一个类似于上面的表单..如果我的方法有误，也请纠正我..
如果我完成了这第三部分，那么一切都会好起来的任何角度技术专家请帮助我..
时间太长了请帮帮我..
您可以使用 setControl() 方法.
暂时添加一个空的 form3 部分
this.form3 = new FormGroup({});this.formJoin = new FormGroup({ form1: this.form, form2: this.formPartTwo, form3: this.form3 })选择项目时，根据您创建的表单生成一个新的 FormGroup.
if (e.target.value == 1) {this.array = [];this.form3 = new FormGroup({'Property one': new FormControl('insert what you want')});this.formJoin.setControl('form3', this.form3);你应该能够做一些开始的事情！
Tried my level best please help me out..
I am making an angular dynamic form with a form splitting into total of three parts in which the two parts were made already. Now I am making part three which will be generated by selecting an option from dropdown...
Even those part also is done...
But I am unable to make a form array in it... As I am new in angular please help me.
HTML:
Form part 3 will be here which will be array
<select multiple (change)="changeEvent($event)">
<option *ngFor="let opt of persons" [value]="opt.key">{{opt.value}}</option>
</select>
<div *ngFor="let item of array">
{{item.value}} is the parent
<div *ngFor="let child of item.templateChild">
{{child.property_name}}
<div *ngFor="let partThree of questionsParthree">
<ng-container>
<app-question [question]="partThree" [form]="formPartThree"></app-question>
</ng-container>
</div>
</div>
</div>
Select Box change event:
changeEvent(e) {
if (e.target.value == 1) {
this.array = [];
this.array.push(
{
key: 1, value: "Template one",
templateChild: [
{ property_name: "Property one" },
{ property_name: "Property two" }
]
}
);
let propertiesArray = [];
this.array.forEach(element => {
element.templateChild.forEach(data => {
propertiesArray.push(
{
key: data.property_name,
label: data.property_name,
"elementType": "textbox",
"type": "text"
}
)
});
});
this.questionsPartThree = this.service.getQuestions(propertiesArray);
this.formPartThree = this.qcs.toFormGroup(this.questionsPartThree);
this.formJoin = new FormGroup({ form1: this.form, form2: this.formPartTwo, form3: this.formPartThree });
}
}
Continuation like part 1 and 2..
I have posted the code related to creating the form array alone..
Updated Stackblitz https://stackblitz.com/edit/angular-x4a5b6-mnyifs
Here if we select any option then you will get the input boxes with values..
I would like to create array with it like,
If we select the first option Template One, Output expected is exactly as like
"templateChild" : [
{"property_one": "", "property_two":""}
]
So the final output of whole form going to be if i select Template One and also Template Two from select box (as select box is multi select),
{
"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":""}]
}
]
}
Have a work around in the demo i have provided and give me a better solution..
Kindly please help me to create a form as like the above when we select an option from dropdown.. If i am wrong in my approach also please correct me..
If i finish this third part then everything will get alright any angular technical expert please help me..
Taking too long please help me out..
You can dynamically change an AbstractController inside a FormGroup using the setControl() method.
Add an empty form3 part for the moment
this.form3 = new FormGroup({});
this.formJoin = new FormGroup({ form1: this.form, form2: this.formPartTwo, form3: this.form3 })
When selecting an item, generate a new FormGroup according the form you create.
if (e.target.value == 1) {
this.array = [];
this.form3 = new FormGroup({'Property one': new FormControl('insert whatever you want')});
this.formJoin.setControl('form3', this.form3);
You should be able to do something what that start!
这篇关于以角度形式将输入创建为数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
