代码之家 › 专栏 › 技术社区 › Oliver Ni

角度5-带对象的窗体控件

typescript forms angular

22

Oliver Ni · 技术社区 · 8 年前

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

应用程序的一部分是需要显示成员列表。members数组如下所示:

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

我做到了这一点,但我还需要用户能够编辑这些成员的姓名。我尝试使用反应式表单来实现这一点:

首先,我做了一个 FormGroup 仅由一个组成 FormArray 。这 Formaray公司 基本上包含所有成员对象:

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 要使用 名称 属性作为值?

我想要它,以便在 <input> ,以及当用户编辑 <输入(>); 它更新了 名称 对象的属性,同时保留所有其他属性。

任何帮助都将不胜感激!

1 回复 | 直到 7 年前

1

27

developer033 5 年前

由于要保留完整对象,因此必须创建 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</small>
      </div>
    </div>
  </div>
</form>

DEMO