Question

尽我所能，请帮助我。

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

即使那部分也完成了...

但是我无法在其中创建一个表单数组。由于我是新用户，请帮助我。

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

请在我提供的demo中解决，并为我提供更好的解决方案。

请从下拉菜单中选择一个选项，如上所示，请帮助我创建一个表格。.如果我的方法不正确，请更正我..

如果我完成了第三部分，那么任何有经验的技术专家都可以解决所有问题。

花太长时间请帮帮我。

Answer 1

您可以使用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);

您应该能够开始做些什么！

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

1 个答案: