web-dev-qa-db-ja.com

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: [...]
  }
]

私はそれを機能させましたが、ユーザーがそれらのメンバーの名前を編集できるようにする必要もありました。私はこれを動作させるためにReactive Formsを使用しようとしました：

最初に、1つのFormGroupだけで構成されるFormArrayを作成しました。この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プロパティが更新され、他のすべてのプロパティが保持されるようにします。

助けていただければ幸いです！

angularformstypescript
10
Oliver Ni

オブジェクト全体を保持するため、次のようにformGroupsを作成する必要があります。

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

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

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]="i" 
      *ngFor="let control of formGroup.get('roster').controls; index as i">
      <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</small>
      </div>
    </div>
  </div>
</form>

[〜＃〜] demo [〜＃〜]

13
developer033