如何在angular2中实现嵌套数据形式 [英] How to implement nested data form in angular2

问题描述

这是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 但我不知道嵌套的表单数据.谁能解释如何实现它.

I have reference of this answer but i don't know about nested form data. can anyone explain how to implement it.

推荐答案

这是您的代码，该代码设置了您从后端接收的数据，这里我将其存储在变量data中.

Here is your code, which sets the data you are receiving from backend, here I have stored it in a variable data.

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

Please notice, this is a shortened version of your form, but the basics are there, you only need to add the few missing properties in corresponding form arrays.

空表单外观的构建只是一个与您的json结构匹配的名为work_experience的FormArray:

The build of the empty form looks is just a FormArray named work_experience matching your json structure:

this.myForm = this.fb.group({
  work_experience: this.fb.array([])
})

我们在接收数据时添加字段，在接收数据时在回调中调用一个名为setWorkExperience的函数:

We add the fields when you are receiving the data, call a function called setWorkExperience in the callback when receiving data:

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 is called from the previous function, where we patch the data with from project_experience to the inner form array:

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()返回一个formGroup:

In the template you can see the buttons for add and delete of projects and companies. Adding and deleting companies are straightforward, where initCompany() returns a 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推入该控件即可:

In the add project we pass as parameter from the template the current formArray control, to which we just push a new FormGroup:

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

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

In the delete function we pass the current formarray as well as the index of the project we want to delete:

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

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

That should cover pretty much everything.

这篇关于如何在angular2中实现嵌套数据形式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！