Question

我目前正在开发一个由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: [...]
  }
]

我做到了，但我还需要用户能够编辑这些成员的名字。我尝试使用Reactive Forms来实现这个目的：

首先，我制作了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属性，同时保留所有其他属性属性。

任何帮助将不胜感激！

Answer 1

由于您要保留完整对象，因此您必须创建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] }); }，如下所示：

<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>

<强> HTML：

group p by p.NAME into grp

https://smmry.com/https://www.cnn.com/2018/04/01/politics/ronald-kessler-jake-tapper-interview/index.html#&SM_LENGTH=7

Angular 5 - 使用对象进行表单控制

1 个答案: