Angular 5-带有对象的表单控件 [英] Angular 5 - Form Control with objects

问题描述

我目前正在开发由Django支持的Angular应用程序.

I'm currently working on an Angular application backed by Django.

应用程序的一部分是它需要显示成员列表.成员数组看起来像这样:

One part of the application is that it needs to display a list of members. The members array looks somewhat like this:

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

我已经开始工作了，但是我还需要用户能够编辑这些成员的姓名.我尝试使用反应式表单来使其正常工作:

I got that working, but I also needed the user to be able to edit the names of those members. I tried using Reactive Forms to get this working:

首先，我制作了一个仅由一个 FormArray 组成的 FormGroup .这个 FormArray 基本上包含所有成员对象:

First, I made a FormGroup consisting of just one FormArray. This FormArray basically contained all of the member objects:

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

接下来，我写出了该组件的模板:

Next, I wrote out the template for the component:

<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 属性作为值?

But instead of displaying the name property of each member it just tries to display the whole object, making [Object object]. Is there any way to configure each FormControl to use the name property as a value?

我想要它，以便仅在< input> 中显示名称，并且当用户编辑< input> 时，它会更新对象的名称属性，同时保留所有其他属性.

I want it so that only the name is displayed in the <input>, and when the user edits the <input> it updates the name property of the object, while retaining all the other properties.

任何帮助将不胜感激！

推荐答案

由于要保留完整的对象，因此必须创建 formGroups ，如下所示:

Since you want to keep the full object, you'll have to create formGroups, like this:

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]="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>

演示

这篇关于Angular 5-带有对象的表单控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！