Angular 反应式表格表格组

Question

我需要在同一节点下为两个不同的数组设置一个 formControl，这样我就可以在给定的 Reactive 表单中添加和删除相应的嵌套节点。

预期JSON格式：

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

我已经在日期和节点上实现了控制，我可以分别为其添加和删除表单字段，但是我需要单独控制类型 leg 和节点下的 activity。

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

更新：一个form数组下需要两个formgroup，请帮忙实现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':[]
    })
  }

错误：找不到路径为的控件：'days -> 0 -> nodes -> 1 -> from'

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

Answer 1

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

例如：

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

Answer 2

keethama，一步一个脚印。您在 formArray 中有一个 formArray，因此创建两个函数 return 一个 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())

并向天数组添加一个新节点

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

一个incomplete stackblitz

Answer 3

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

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

一个 formArray 需要他的所有元素都具有相同的属性

问题:nodes只是一个数组，有两个元素（一个是控制Leg，另一个是控制类别）？

在这种情况下，days 是一个 formArray，每个元素都是一个包含两个 peoperies 的 formGroup，其中一个是 一个数组（不是 formArray），包含两个元素

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

在这种情况下你可以有三个 getter

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

Answer 4

我认为这可能不是一个完整的回复，因为使用嵌套 FormArrays 的工作示例需要一些时间，但我很确定您会发现这篇文章有趣且有用（它帮助我解决了很多问题像这样的情况）：

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

Angular 反应式表格表格组

Angular Reactive forms formgroup

javascript

angular

angular-reactive-forms

angular-forms

angular-formbuilder