如何在另一个formArray中循环一个FormArray答案

【问题标题】：How to loop over a FormArray inside another formArray如何在另一个formArray中循环一个FormArray
【发布时间】：2021-06-23 19:06:28
【问题描述】：

我可以遍历 schedule 数组来访问 dayHeading。我无法在循环中访问 daySchedule。我尝试添加第二个循环以零成功访问 daySchedule。我如何能够添加一个新循环来循环 daySchedule。

core.js:6162 ERROR 错误：找不到带有路径的控件：'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>

【问题讨论】：

dailySchedule 或 daySchedule?!
您的代码看起来不清晰。您要迭代的“形式”是什么？此外，您正在尝试迭代具有 dayHeading 和日程安排的日程安排数组，而不是包含时间和名称的第二个表单数组。那么你是如何得到这个错误的呢？你能解释一下你的问题到底是什么吗？还请重新格式化您的代码以便更好地理解并根据您的错误stackblitz.com/edit/… 更新此 stackblitz

标签： angular angular-reactive-forms

【解决方案1】：

<div formArrayName="schedule">
  <div
    *ngFor="let event of form.get('schedule').controls; let i = index"
    [formGroupName]="i"
  >
    <input
      type="text"
      formControlName="dayHeading"
      placeholder="Enter the daily Heading"
    />
    <div formArrayName="daySchedule">
      <div
        *ngFor="let scheduleEvent of event.get('daySchedule').controls; let j = index"
        [formGroupName]="j"
      >
        <input
          type="text"
          formControlName="time"
          placeholder="Enter the event's scheduled time"
        />

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

有点恶心，但是bada bing bada boom

【讨论】：

【解决方案2】：

你总是想控制一个 FormArray，你需要一个“getter”来获取 formArray。由于您有一个 formArray 和一个 FormArray 内部，因此您需要两个函数。第一个是“getter”，另一个是带有参数“index”的简单函数

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

你可以使用唐老鸭的“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>

stackblitz

【讨论】：