时间戳

首页 > 解决方案 > 以角度形式将输入创建为数组

javascript - 以角度形式将输入创建为数组

问题描述

尽力了我的水平请帮助我..

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

甚至那些部分也完成了......

但我无法在其中制作表单数组......因为我是角度新手，请帮助我。

HTML：

表格第 3 部分将在这里，这将是数组

 <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 部分一样继续。

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

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

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

我想用它创建数组，

如果我们选择第一个选项Template One，输出预期是完全一样的

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

所以整个表单的最终输出将是如果我选择Template One并且还Template Two来自选择框（因为选择框是多选），

{
  "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":""}]
    }
    ]
}

在我提供的演示中解决问题并给我一个更好的解决方案..

当我们从下拉列表中选择一个选项时，请帮助我创建一个类似于上面的表单。如果我的方法有误，请纠正我。

如果我完成这第三部分，那么一切都会好起来的，任何有角度的技术专家请帮助我..

时间太长了请帮帮我..

标签： javascriptangulartypescriptangular6angular-reactive-forms

解决方案

setControl()您可以使用该方法动态更改 FormGroup 内的 AbstractController 。

暂时添加一个空的 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 whatever you want')});
  this.formJoin.setControl('form3', this.form3);

你应该能够做一些事情，开始！

推荐阅读