在 Angular 响应式表单中循环一个 FormControl

Question

我正在尝试使用响应式表单遍历 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
        }
    ]
}

有一个错误说

Shadowed name: 'element' (no-shadowed-variable)

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

Answer 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

在 Angular 响应式表单中循环一个 FormControl

Loop a FormControl in Angular Reactive Forms

angular

typescript

angular-reactive-forms

form-control