如何在另一个 formArray 中循环一个 FormArray [英] How to loop over a FormArray inside another formArray

查看：34
本文介绍了如何在另一个 formArray 中循环一个 FormArray的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我可以遍历计划数组以访问 dayHeading.我无法在循环中访问 daySchedule.我尝试添加第二个循环来访问 daySchedule，但成功率为零.我如何才能添加一个新循环来循环使用 daySchedule.

core.js:6162 ERROR 错误:找不到路径控制:'dailySchedule ->0 ->时间'

form = new FormGroup({时间表:新的FormArray([新表单组({dayHeading : new FormControl(''),daySchedule : new FormArray([新表单组({时间:new FormControl(''),名称:new FormControl(''),}),]),}),])});

 
<输入类型=文本"formControlName="dayHeading";placeholder="输入每日标题";/><输入类型=文本"formControlName=时间"placeholder="输入活动的预定时间";/><输入类型=文本"formControlName=名称"placeholder="输入事件名称";/>

解决方案

你总是想控制一个 FormArray 你需要一个getter"获取formArray.由于您有一个 formArray 并且在一个 FormArray 中，您需要两个函数.第一个是getter"，另一个是带有参数index"的简单函数

 获取 scheduleFormArray(){返回 this.form.get('schedule') 作为 FormArray}getDaySchedule(索引:数字){返回 this.scheduleFormArray.at(index).get('daySchedule') 作为 FormArray}

你可以使用唐老鸭的html"

<div *ngFor="let event of scheduleFormArray.controls;让 i = 索引"[formGroupName]=i">....<div formArrayName="daySchedule"><!--这里使用函数 getDaySchedule(i)--><div *ngFor="let scheduleEvent of getDaySchedule(i).controls;让 j = 索引"[formGroupName]=j">....

stackblitz

I can loop over the schedule array to access the dayHeading. I'm not able in the loop to access the daySchedule. I've tried adding a second loop to access the daySchedule with zero success. How would I be able to add a new loop to loop over the daySchedule.

core.js:6162 ERROR Error: Cannot find control with path: 'dailySchedule -> 0 -> time'

form = new FormGroup({
schedule : new FormArray([
   new FormGroup({
       dayHeading : new FormControl(''),
       daySchedule : new FormArray([
         new FormGroup({
             time: new FormControl(''),
             name: new FormControl(''),
         }),
       ]),
   }),
])
});


   <div 
      *ngFor="let event of form.controls.schedule['controls']; let i = index;"
      [formGroupName]="i">
      <input 
          type="text" 
          formControlName="dayHeading" 
          placeholder="Enter the daily Heading" />

      <input 
          type="text" 
          formControlName="time" 
          placeholder="Enter the event's scheduled time" /> 
      
      <input 
          type="text" 
          formControlName="name" 
          placeholder="Enter the event's name" /> 
  </div>

解决方案

Always you want to control a FormArray you need a "getter" to get the formArray. As you has a formArray and inside a FormArray, you need two functions. The first is a "getter", the other one is a simple function with an argument "index"

  get scheduleFormArray()
  {
    return this.form.get('schedule') as FormArray
  }
  getDaySchedule(index:number)
  {
    return this.scheduleFormArray.at(index).get('daySchedule') as FormArray
  }

The you can use the Donald Duck's "html"

<!--here use the getter scheduleFormArray-->
<div *ngFor="let event of scheduleFormArray.controls; let i = index"
  [formGroupName]="i" >
  ....
  <div formArrayName="daySchedule">
    <!--here you use the function getDaySchedule(i)-->
    <div *ngFor="let scheduleEvent of getDaySchedule(i).controls; let j = index"
      [formGroupName]="j">
         ....
    </div>
  </div>
</div>
</div>

the stackblitz

这篇关于如何在另一个 formArray 中循环一个 FormArray的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆