以角度形式将输入创建为数组 [英] Create inputs as array in angular form

问题描述

尽我所能，请帮助我.

我正在制作一个角度动态表格，其中的表格分为三个部分，其中两个部分已经制作完毕.现在，我将制作第三部分，这是通过从下拉菜单中选择一个选项来生成的.

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:

第3部分将在此处，它将是数组

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>

选择框更改事件:

  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 });
    }
   }

延续第1部分和第2部分.

Continuation like part 1 and 2..

我已经发布了与单独创建表单数组有关的代码.

I have posted the code related to creating the form array alone..

更新了Stackblitz https://stackblitz.com/edit/angular-x4a5b6-mnyifs

在这里，如果我们选择任何选项，那么您将获得带有值的输入框.

Here if we select any option then you will get the input boxes with values..

我想用它来创建数组，

如果我们选择第一个选项Template One，则预期输出将完全相同

If we select the first option Template One, Output expected is exactly as like

"templateChild" : [
{"property_one": "", "property_two":""}
]

因此，如果我从选择框中选择Template One以及Template 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":""}]
    }
    ]
}

在 demo 我提供了一个更好的解决方案.

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..

花太长时间请帮帮我.

推荐答案

您可以使用 setControl() 方法.

You can dynamically change an AbstractController inside a FormGroup using the setControl() method.

暂时添加一个空的form3零件

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 })

选择一个项目时，根据您创建的表单生成一个新的FormGroup.

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屋！