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

Posted 2023-03-13

【中文标题】以角度形式将输入创建为数组

【英文标题】：Create inputs as array in angular form

【发布时间】：2019-04-22 21:02:49

【问题描述】：

尽我所能，请帮帮我..

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

连那些部分也完成了……

但我无法在其中制作表单数组...由于我是 Angular 新手，请帮助我。

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 中解决问题并给我一个更好的解决方案..

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

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

时间太长，请帮帮我..

【问题讨论】：

签出this。

在stackblitz.com/edit/angular-x4a5b6-tvuih2 我阐明了如何创建数组。查看 question-control.service 中的更改 - 添加数组 - 以及如何管理一个项目选择多个（尝试显示数组的部分）

@Eliseo，谢谢Eliseo，但这个例子只帮助了我一半。因为我正在根据选定的下拉菜单创建属性输入框，该下拉菜单将在template_details 下。在每个选择，template_details 将被添加，而不是在template_details 下附加每个属性.. 我恳请您在我期望的问题中参考我的预期输出.. 我仍然希望感谢您的帮助.. 另外我怀疑我是否需要为那些动态文本框创建[formArrayName]..

以此为例试试：stackblitz.com/edit/angular-kbu1kv

感谢您的回复兄弟..，如果您有时间，请按照问题中给出的方式制作预期的 json.. 我需要以单一形式将其作为第三部分..

【参考方案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);

你应该可以做一些事情！

【讨论】：

以下是更改：stackblitz.com/edit/angular-x4a5b6-v2uqk4?file=src/app/… 您必须将正确的绑定添加到要完成的表单输入