Question

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

core.js:6162 错误错误：找不到路径控制：'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>

Answer 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 繁荣

Answer 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

如何在另一个 formArray

2 个答案: