Question

以下是Json架构：

{
    "_id" : ObjectId("59031d77fd5e1c0b3c005d15"),

    "resume_data" : {

     "work_experience" : [ 
            {
                "company" : "example",
                "website" : "example.com",
                "position" : "Internship",
                "highlights" : "Learn To Create API In Laravel Framework. and also Learn Angular 2 for Front end Development.",
                "project_experience" : [ 
                    {
                        "projectName" : "Fb Project",
                        "teamMember" : "5",
                        "technology" : "PHP,Laravel-5,Angular-2,MongoDb",
                        "projectPosition" : "Back-end Developer"
                    }
                ]
            }
        ]

   }
}

以下是图片

我参考了这个answer，但我不知道嵌套表单数据。任何人都可以解释如何实现它。

Answer 1

这是您的代码，用于设置您从后端接收的数据，此处我已将其存储在变量data中。

请注意，这是您的表单的缩短版本，但基础知识在那里，您只需要在相应的表单数组中添加一些缺少的属性。

空表单的构建只是一个名为FormArray的{{1}}与您的json结构匹配：

work_experience

我们在您收到数据时添加字段，在接收数据时在回调中调用一个名为this.myForm = this.fb.group({ work_experience: this.fb.array([]) })的函数：

setWorkExperience

从前一个函数调用

setWorkExperience(){ // get the formarray let control = <FormArray>this.myForm.controls.work_experience; // iterate the array 'work_experience' from your JSON and push new formgroup with properties and the inner form array this.data.work_experience.forEach(x => { // add the rest of your properties also below control.push(this.fb.group({company: x.company, project_experience: this.setFormArray(x)})) }) }，我们将数据从setFormArray修补到内部表单数组：

project_experience

模板看起来像这样：

setFormArray(x) {
  // create local array which is returned with all the values from the 'project_experience' from your JSON
  let arr = new FormArray([])
  x.project_experience.map(y => {
    // add the rest of your properties below
    arr.push(this.fb.group({projectName: y.projectName}))
  })
  return arr;
}

在模板中，您可以看到用于添加和删除项目和公司的按钮。添加和删除公司很简单，<form [formGroup]="myForm">  <div formArrayName="work_experience"> <div *ngFor="let a of myForm.get('work_experience').controls; let i=index"> <h3>COMPANY {{i+1}}: </h3> <div formGroupName="{{i}}"> <label>Company Name: </label> <input formControlName="company" /><span><button (click)="deleteCompany(i)">Delete Company</button></span><br><br>  <div formArrayName="project_experience"> <div *ngFor="let b of myForm.controls.work_experience.controls[i].controls.project_experience.controls; let j=index"> <h4>PROJECT {{j+1}}</h4> <div formGroupName="{{j}}"> <label>Project Name:</label> <input formControlName="projectName" /><span><button (click)="deleteProject(a.controls.project_experience, j)">Delete Project</button></span> </div> </div> <button (click)="addNewProject(a.controls.project_experience)">Add new Project</button> </div> </div> </div> </div> </form>返回formGroup：

initCompany()

在添加项目中，我们从模板传递当前formArray控件作为参数，我们只是推送一个新的FormGroup：

deleteCompany(index) {
  let control = <FormArray>this.myForm.controls.work_experience;
  control.removeAt(index)
}

addNewCompany() {
  let control = <FormArray>this.myForm.controls.work_experience;
  control.push(this.initCompany())
}

在delete函数中，我们传递当前的formarray以及我们要删除的项目的索引：

addNewProject(control) {
  control.push(this.initProject())
}

这应该涵盖几乎所有内容。

Plunker

Answer 2

请查看

Plunker Here

Json Store赞这个

{
  "name": "",
  "work_experience": [
    {
      "name": "asdasd",
      "project_experience": [
        {
          "Project_Name": "asdasdasd"
        },
        {
          "Project_Name": "asdasdasd"
        }
      ]
    }
  ]
}

如何在angular2中实现嵌套数据表单

2 个答案:

Plunker