Angular 5 - 帶有物件的表單控制

我目前正在開發一個由 Django 支持的 Angular 應用程式。

應用程式的一部分是它需要顯示會員列表。會員陣列大致如下：

[
  {
    name: 'John Smith',
    id: 3,
    score_set: [...]
  },
  {
    name: 'Jane Doe',
    id: 7,
    score_set: [...]
  },
  {
    name: 'Bill Appleseed',
    id: 3,
    score_set: [...]
  },
  {
    name: 'Bob Lee',
    id: 3,
    score_set: [...]
  }
]

我已經讓它運作了，但我也需要使用者能夠編輯這些成員的名字。我嘗試使用反應式表單來實現這個功能：

首先，我建立了一個僅包含一個 FormArray 的 FormGroup。這個 FormArray 基本上包含了所有的成員物件：

this.form = this.fb.group({
  roster: this.fb.array(this.members.map((elem) => [elem, Validators.required]))
});

接下來，我寫出了這個元件的模板：

<form>
  <div [formGroup]="form">
    <div formArrayName="roster">
      <div *ngFor="let control of form.controls.roster.controls">
        <div class="form-group">
          <input class="form-control" [formControl]="control" placeholder="Enter name">
        </div>
      </div>
    </div>
  </div>
</form>

但它沒有顯示每個成員的 name 屬性，而是試圖顯示整個對象，結果變成了 [Object object]。有沒有辦法配置每個 FormControl 使用 name 屬性作為值？

我希望 <input> 中只顯示名稱，當使用者編輯 <input> 時，它會更新物件的 name 屬性，同時保留所有其他屬性。

任何幫助都將不勝感激！

答案＃1

既然你想保留完整的物件，你將需要像這樣建立 formGroups:

interface Member {
  id: number;
  name: string;
}

ngOnInit(): void {
  this.formGroup = this.formBuilder.group({
    roster: this.formBuilder.array(this.members.map(member => this.createMemberGroup(member))),
  });
}

createMemberGroup(member: Member): FormGroup {
  return this.formBuilder.group({
    ...member,
    name: [member.name, Validators.required],
  });
}

HTML:

<form class="container pt-2" [formGroup]="formGroup">
  <div formArrayName="roster">
    <div 
      [formGroupName]="index" 
      *ngFor="let control of formGroup.get('roster').controls; index as index">
      <div class="form-group">
        <input 
          class="form-control" 
          formControlName="name" 
          placeholder="Enter name" 
          [class.is-invalid]="control.invalid">
        <small class="text-danger" *ngIf="control.invalid">Required
      </div>
    </div>
  </div>
</form>

示範