如何在角度5中将编辑表单的值与对象数组绑定在一起? [英] How do I bind values of edit form with array of object in angular 5?

问题描述

我有一个Student个对象的数组.界面看起来像这样:

I have an Array of Student Objects. The interface looks something like this:

interface Student {
  title: string;
  firstName: string;
  lastName: string;
  dob: string;
  age: number;
}

我要编辑title，firstName& lastName.

I want to edit title, firstName & lastName.

该表单将包含一系列学生对象.从db获取的对象中已经有一些数据. title是一个下拉列表，firstName和lastName是文本框.

The form will have array of student objects. There is already some data in objects fetched from db. title is a dropdown, firstName and lastName are textboxes.

将有一个保存按钮，单击该按钮时，表格的值应捆绑并通过Student[]发送到打字稿.

There will be a save button, on click of which the values of the form should be bundled and sent through Student[] to typescript.

我该如何实现?

推荐答案

您可以为此使用反应式表单.

You could use a Reactive Form for this.

首先获取您的数据，并相应地生成一个FormGroup.我正在使用ngOnInit方法中的FormBuilder来做到这一点.

First get your data and generate a FormGroup accordingly. I'm doing that using FormBuilder in the ngOnInit method.

您从API获得的任何信息都可以映射为FormGroup的FormArray.

Whatever you get from the API can be mapped as a FormArray of FormGroup(s).

现在，在模板中，您只需要在选择列表上使用formControlName指令，以自动填充title属性的API数据即可.

Now in the template, you would just have to use the formControlName directive on a select list to auto-populate it with the API data for the title property.

尝试一下:

import { Component } from "@angular/core";
import { FormGroup, FormArray, FormBuilder, FormControl } from "@angular/forms";
import { HttpClient } from "@angular/common/http";

interface Student {
  title: string;
  firstName: string;
  lastName: string;
  dob: string;
  age: number;
}

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular";
  form: FormGroup;
  constructor(private http: HttpClient, private fb: FormBuilder) {}

  ngOnInit() {
    this.http.get("/assets/data.json").subscribe((students: Array<Student>) => {
      this.form = this.fb.group({
        students: this.fb.array(
          students.map(student =>
            this.fb.group({
              title: [student.title],
              firstName: [student.firstName],
              lastName: [student.lastName],
              dob: [student.dob],
              age: [student.age]
            })
          )
        )
      });
    });
  }

  onSubmit() {
    console.log("Form Value: ", this.form.value);
  }
}

在模板中:

<form 
  *ngIf="form" 
  [formGroup]="form" 
  (submit)="onSubmit()">
  <div 
    formArrayName="students" 
    *ngFor="let studentFormGroup of form.controls['students'].controls; let i = index;">
    <div [formGroupName]="i">
      <label for="title">Title</label>
      <select name="title" id="title" formControlName="title">
        <option value="" disabled>Select</option>
        <option value="Mr.">Mr.</option>
        <option value="Mrs.">Mrs.</option>
        <option value="Ms.">Ms.</option>
      </select>
      <br>
      <label for="firstName">First Name</label>
      <input type="text" id="firstName" formControlName="firstName">
      <br>
      <label for="lastName">Last Name</label>
      <input type="text" id="lastName" formControlName="lastName">
      <br>
      <label for="dob">DOB</label>
      <input type="text" id="dob" formControlName="dob">
      <br>
      <label for="age">Age</label>
      <input type="text" id="age" formControlName="age">
      <br>
      <hr>
      <br>
    </div>
  </div>
  <button type="submit">Submit</button>
</form>

---

这是 查看全文