Angular反应形式表单组

如何解决Angular反应形式表单组

我需要在同一节点下具有两个不同数组的formControl，以便可以以给定的反应形式添加和删除相应的嵌套节点。

期望的JSON格式：

{
  "title": null,"days": [
    {
      "date": null,"nodes": [
        {
          "type": "leg","from": null,"to": null
        },{
          "type": "activity","category": null
        }
      ]
    }
  ]
}

我在日期和节点上实现了控件，分别能够为其添加和删除表单字段，但是我需要单独的控件来控制leg和节点下的活动类型。

在这里有什么方法可以实现嵌套的formControl吗？

更新： 在表单数组下需要两个表单组，请帮助实现HTML。

initX() {
    return this.fb.group({
      'date': [],'nodes': this.fb.array([
        this.initY(),this.initZ()
      ]),});
  }

  initY() {
    return this.fb.group({
      'type': ['leg'],'from': [],'to': []
    })
  }

  initZ() {
    return this.fb.group({
      'type': ['activity'],'category':[],'cost':[]
    })
  }

错误：找不到路径为“天-> 0->节点-> 1->来源”的控件

可以在此处找到示例代码的堆栈闪电：https://stackblitz.com/edit/angular-ivy-fkgxrr

解决方法

尝试使用两种方式进行数据绑定。这将简化您的过程。

例如：

<input type="text" name="name" [(ngModel)]="model.name">

,

keethama，一步一步来。您在formArray内有一个formArray，因此使两个函数返回一个formArray

  get days():FormArray
  {
    return this.formGroup.get('days') as FormArray;
  }
  getNodes(i:number):FormArray
  {
    return this.days.at(i).get('nodes') as FormArray
  }

好，要创建表格划分并使用三个功能：

  createForm(data:any)
  {
    data=data || {title:null,days:null}
    return new FormGroup({
      title:new FormControl(data.title),days:data.days?
           new FormArray(data.days.map(d=>this.createDays(d))):
           new FormArray([])
      
    })
  }
  createDays(data:any=null)
  {
    data=data || {date:null,nodes:null}
    return new FormGroup({
        date:new FormControl(data.date),nodes:data.nodes?
              new FormArray(data.nodes.map(x=>this.createNodes(x))):
              new FormArray([])
    })
  }
  createNodes(data:any=null)
  {
    data={type:null,from:null,to:null,category:null,...data}
    return new FormGroup({
      type: new FormControl(data.type),from: new FormControl(data.from),to: new FormControl(data.to),category: new FormControl(data.category)
    })
  }

好吧，现在来看一下.html

<form *ngIf="formGroup" [formGroup]="formGroup">
  title:<input formControlName="title">
  <div formArrayName="days">
    <div *ngFor="let groupDays of days.controls;let i=index" [formGroupName]="i">
        date:<input formControlName="date">
        <div formArrayName="nodes">
          <div *ngFor="let groupnodes of getNodes(i).controls;let j=index" [formGroupName]="j">        
            type:<input formControlName="type"><br/>
        from:<input formControlName="from"><br/>

        to:<input formControlName="to"><br/>
        category:<input formControlName="category">
          </div>
        </div>
    </div>
  </div>
</form>

在ngOnInit中

this.formGroup=this.createForm(this.data)

请参见，如果要向索引索引中的节点添加新节点，则使用

   this.getNodes(index).push(this.createNodes())

并将新节点添加到days数组

   this.days.push(this.createDays())

一个incomplete stackblitz

,

好吧，在我的另一个答案中，“节点”数组就像

[
 {"type": "leg","from": null,"to": null,"category": null}
 {"type": "leg","category": null}
]

formArray的所有元素都具有相同的属性

问题：节点仅仅是具有两个元素的数组（一个用于控制Leg，另一个用于控制类别）？

在这种情况下，days是一个formArray，每个元素是一个带有两个Peperies的formGroup，其中一个是一个带有两个元素的数组（不是formArray）

form=new FormGroup({
  title:new FormControl()
  days:new FormArray([
     date:new FormControl(),nodes:[new FormGroup({...}),new FormGroup({..})]
  ])
})

在这种情况下，您可以使用三个吸气剂

get days():FormArray
{
    return this.formGroup.get('days') as FormArray;
}
get leg(index)
{
    return this.days.at(i).get('nodes')[0] as FormGroup
}
get category(index)
{
    return this.days.at(i).get('nodes')[1] as FormGroup
}

然后在div中直接使用[formGroup]，例如

<div [formGroup]="category[i]">
   <input formControlName="from">
   ...
</div>

否则我无法理解您的json

,

我认为这可能不是一个完整的答案，因为使用嵌套FormArrays的工作示例将花费一些时间，但是我敢肯定，您会发现本文有趣而有用（在很多情况下对我有帮助这个）：

• https://netbasal.com/angular-reactive-forms-the-ultimate-guide-to-formarray-3adbe6b0b61a