如何在angular2中实现嵌套数据形式

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 1

请看这个

Plunker Here

Json 像这样存储

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

Answer 2

这是你的代码，它设置了你从后端接收的数据，这里我把它存储在一个变量中 data。

请注意，这是您的表单的简化版本，但基础知识已经有了，您只需在相应的表单数组中添加一些缺少的属性。

空表单的构建看起来只是一个名为 work_experience 的 FormArray 匹配您的 json 结构：

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">
  <!-- Outmost array iterated -->
  <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>
        <!-- inner formarray iterated -->
        <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>

在模板中可以看到添加和删除项目和公司的按钮。添加和删除公司很简单，其中 initCompany() returns 一个 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())
}

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

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

在删除函数中，我们传递了当前格式数组以及我们要删除的项目的索引：

deleteProject(control, index) {
  control.removeAt(index)
}

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

如何在angular2中实现嵌套数据形式

How to implement nested data form in angular2

json

angular2-forms

angular

Plunker