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

发布时间：2020-12-17 17:34:20 所属栏目：安全来源：网络整理

导读：我目前正在研究由Django支持的Angular应用程序. 该应用程序的一部分是它需要显示成员列表. members数组看起来有点像这样： [ { name: 'John Smith',id: 3,score_set: [...] },{ name: 'Jane Doe',id: 7,{ name: 'Bill Appleseed',{ name: 'Bob Lee',score_se

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

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

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

我得到了它的工作,但我还需要用户能够编辑这些成员的名字.我尝试使用Reactive Forms来实现这个目的：

首先,我创建了一个仅由一个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属性,同时保留了所有其他属性.

任何帮助,将不胜感激！

解决方法

由于您希望保留完整对象,因此您必须创建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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!