在 Angular 反应式表单中循环一个 FormControl答案

【问题标题】：Loop a FormControl in Angular Reactive Forms在 Angular 反应式表单中循环一个 FormControl
【发布时间】：2021-01-09 03:15:49
【问题描述】：

我正在尝试使用响应式表单在 Angular 中循环嵌套表单控件。有一个“taskSchedule”，其中有许多需要循环的“note”API 数据。

  this.profileForm = new FormGroup({
  userName: new FormControl(this.currentUserData.id),
  title: new FormControl(this.taskScheduleData.title),
  startDate: new FormControl(this.startDateConvert),
  endDate: new FormControl(this.endDateConvert),


  // this is where it should loop through the notes nested api data but it does not

  this.taskScheduleData.forEach(element => {
    this.notesForm = new FormGroup({
      notesInfo: new FormControl(this.taskScheduleData.notes[element].notesInfo),
     });
   });
});

API 数据

{
    "id": 10,
    "title": "Post test with notes",
    "start": "2020-09-14T12:00:00",
    "end": "2020-09-14T17:30:00",
    "userId": 2,
    "notes": [
        {
            "id": 4,
            "notesInfo": "This is third notes",
            "dateCreated": "2020-09-14T12:12:00",
            "userId": 2,
            "taskScheduleId": 10
        },
        {
            "id": 6,
            "notesInfo": "this is second notes",
            "dateCreated": "2020-09-20T22:43:00",
            "userId": 3,
            "taskScheduleId": 10
        },
        {
            "id": 7,
            "notesInfo": "this is third notes",
            "dateCreated": "2020-09-20T22:43:00",
            "userId": 3,
            "taskScheduleId": 10
        }
    ]
}

有一个错误提示

阴影名称：'元素'（无阴影变量）

显然我编写的 foreach 循环是不正确的。有没有办法循环遍历 3 个嵌套的“notes”API 数据，以便每个 note 元素都有自己的控制形式？

【问题讨论】：

这是一个 linter 错误。请显示完整的功能代码。
是this.taskScheduleData notes 数组还是实际响应？

标签： angular typescript angular-reactive-forms reactive-forms form-control

【解决方案1】：

我认为您正在寻找 FormArray，而不是 formGroup。如果只想管理 notesInfo，则创建 FormControls 的 formArray

getFormGroup(data:any=null)
{
   data=data || {userName:null,title:null,startDate:null,endDate:null,notes:null}
   return new FormGroup({
     userName: new FormControl(data.userName),
     title: new FormControl(data.title),
     startDate: new FormControl(data.start?new Date(data.start):null),
     endDate: new FormControl(data.endDate?new Date(data.endDate):null),
     notes:new FormArray(data.notes?
         data.notes.map(x=>new FormControl(x.notesInfo):
         []
         )
   })
}

如果你想管理 notesInfo 和 anohters，你可以创建一个 FormGroups 的 formArray

getFormGroup(data:any=null)
{
   data=data || {userName:null,title:null,startDate:null,endDate:null,notes:null}
   return new FormGroup({
     userName: new FormControl(data.userName),
     title: new FormControl(data.title),
     startDate: new FormControl(data.start?new Date(data.start):null),
     endDate: new FormControl(data.endDate?new Date(data.endDate):null),
     notes:new FormArray(data.notes?
         data.notes.map(x=>this.getGroupNotes(x)):
         [])
   })
}

getGroupNotes(data:any=null)
{
   data=data || {id:nul,notesInfo:null,dateCreated:null,userId:null,taskSheduleId:null}
   return new FormGroup({
        id: new FormControl(data.id),
        notesInfo: new FormControl(data.notesInfo),
        dateCreated: new FormControl(data.dateCreated?new Date(data.dateCreated):null),
        userId: new FormControl(data.userId)
        taskScheduleId: new FormControl(data.taskScheduleId)
   })
}

那么你可以使用 as

  this.profileForm=this.getFromGroup(data) // create a FormGroup with data
  //or 
  this.profileForm=this.getFromGroup() // create a FormGroup empty

【讨论】：

如果我想更新一个 id 为 3 的特定笔记，我将如何只更新该笔记并记下该数组中的所有笔记？
您可以使用 setValue 或 patchValue。您需要“到达”formGroup 或 formArray，例如 this.profileForm.get('notes') as FormArray).at(0).patchValue({notesInfo:'new note'})，例如只改变数组第一个元素的属性 notesInfo 的值