如何将编辑表单的值与角度 5 中的对象数组绑定？答案

【问题标题】：How do I bind values of edit form with array of object in angular 5?如何将编辑表单的值与角度 5 中的对象数组绑定？
【发布时间】：2019-11-01 16:47:54
【问题描述】：

我有一个 Student 对象数组。界面如下所示：

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

我想编辑title、firstName 和lastName。

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

会有一个保存按钮，点击该按钮，表单的值应该被捆绑并通过Student[]发送到打字稿。

我怎样才能做到这一点？

【问题讨论】：

请查看此示例，它可能对您有所帮助：stackoverflow.com/questions/53337587/…
你的情况可以使用类似的方法，你只需要加载已经存在的数据到form
也尝试在这里发布你的代码，就像你到目前为止所尝试的一样
title会显示为dropdown..怎么处理？
我把这个问题看了三遍，但我仍然不确定你在问什么。

标签： angular forms angular5 bind

【解决方案1】：

您可以为此使用响应式表单。

首先获取您的数据并相应地生成FormGroup。我在ngOnInit 方法中使用FormBuilder 这样做。

无论您从 API 获得什么，都可以映射为 FormArray 或 FormGroup(s)。

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

试试这个：

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>

这里有一个Working Code Sample 供您参考。

【讨论】：

【解决方案2】：

您可以在 <li>、<div> 或 <ng-container> 等元素上使用 *ngFor 属性来显示每个学生：

<ul>
  <li *ngFor="let student of students">
    {{ student.firstName }}
  </li>
</ul>

由于 Angular 的双向绑定，您可以将输入中的 html 绑定到学生的属性。

来源：

https://angular.io/guide/displaying-data

https://angular.io/api/core/Input

https://docs.angularjs.org/api/ng/directive/select

【讨论】：