使用 Angular 反应形式编辑对象

Question

如何使用反应形式编辑对象？假设我们有一个对象数组：

people = [
{name: "Janek", color:"blue", id: 1},
{name: "Maciek", color:"red", id: 2},
{name: "Ala", color:"blue", id: 3},
]

如果我想使用模板驱动方法编辑对象的属性 - 这非常简单。超文本标记语言

*ngFor="let person of people" 

和

ngModel="person.name"加"person.color"

如何使用反应式表单来做到这一点，这样我就不会丢失 Id （和其他属性）？

Answer 1

尝试一下：

import { Component } from '@angular/core';
import { FormBuilder, FormArray, Validators, FormGroup } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  people = [
    { name: "Janek", color: "blue", id: 1 },
    { name: "Maciek", color: "red", id: 2 },
    { name: "Ala", color: "blue", id: 3 },
  ];
  peopleForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.peopleForm = this.fb.group({
      people: this.fb.array(this.people.map(person => this.fb.group({
        name: this.fb.control(person.name),
        color: this.fb.control(person.color),
        id: this.fb.control(person.id)
      })))
    });
  }

  get peopleArray() {
    return (<FormArray>this.peopleForm.get('people'));
  }

  onSubmit() {
    console.log(this.peopleForm.value);
  }

}

在你的模板中：

<form [formGroup]="peopleForm">
  <div formArrayName="people">
    <div *ngFor="let person of peopleArray.controls; let i = index;">
      <div [formGroupName]="i">
        <input type="text" formControlName="name">
        <input type="text" formControlName="color">
        <input type="text" formControlName="id">
      </div>
    </div>
  </div>
  <button type="submit" (click)="onSubmit()">Submit</button>
</form>

这是一个StackBlitz 工作示例供您参考。