Question

我试图弄清楚如何在formArrayName中为select设置绑定对象复杂绑定。我猜想formControlName应该引用数组中的当前项目，但是我不知道如何访问它。

<div formArrayName="users">
    <div *ngFor="let u of users.controls; let i=index" [formGroupName]='i'>
      user {{i}}: <select formControlName='id'[compareWith]="compareFn">
        <option *ngFor="let a of avaliableUsers" [ngValue]='a'>{{a.login}}</option>
      </select>
    </div>
  </div>

我创建了一个带有单选（如我所愿）和将值推入“ id”的数组的演示。 https://stackblitz.com/edit/angular-d2uaa1

非常感谢您的帮助。

编辑

要点：

绑定具有所有属性（标识和登录名）的整个UsersGroup对象
最少的附加代码（KISS）

解决方案（基于@ JT_82评论）

   <div *ngFor="let u of users.controls; let i=index">
      <select [formControlName]='i' [compareWith]="compareFn">
        <option *ngFor="let a of avaliableUsers" [ngValue]='a'>{{a.login}}</option>
      </select>
    </div>

 ngOnInit(): void {
    this.owner.patchValue(this.group.owner);
    this.group.users.forEach(u => {
      this.users.push(this.fb.control(u))
    });
  }

 compareFn(a, b): boolean {
    return a.id === b.id;
  }

Answer 1

编辑：根据OP的意愿，我们希望将对象保留为select中的值，因为我们可以不用在formarray中使用表单组，而只需推送formcontrols，然后其中包含对象值：

this.group.users.forEach(u => {
  this.users.push(this.fb.control(u)) // just push formcontrol!
});

，然后在模板中标记：

<select [formControlName]='i' [compareWith]="compareFn">
  <option *ngFor="let a of avaliableUsers" [ngValue]='a'>{{a.login}}</option>
</select>

由于我们现在使用对象值作为表单控件，因此在尝试匹配预设值时，我们需要一个compareWith函数：

compareFn(a, b): boolean {
  return a.id === b.id;
}

StackBlitz

原始答案：

当选择更改时，我可能会调用一个函数，然后从availableUsers查找用户，并为找到的用户设置login的表单值。所以模板：

<select formControlName='id' (change)="findLogin(u)">
  <option *ngFor="let a of avaliableUsers" [ngValue]='a.id'>{{a.login}}</option>
</select>

因此您可以删除compareWith，因为我们现在使用数字作为值。然后，我们在findLogin函数中传递迭代中的当前表单组：

findLogin(group: FormGroup) {
  const user = this.avaliableUsers.find(x => x.id === group.get('id').value)
  group.get('login').setValue(user.login);
}

您分叉的 StackBlitz

角度表单-如何绑定formControlName以在formArrayName中进行选择以使用对象

1 个答案: