Angular 响应式表单仅将对象的一部分映射到 formControlName

Question

我有一个 select 输入，它从对象列表中进行选择，显示名称，并将其绑定到表单的字段中。但是，我需要整个对象可用于 change 事件。更改 formControlName 并不是一个真正的选择。

HTML:

<form [formGroup]="form">
  <!-- Here I can access $event.target.value to obtain just the userName -->
  <select formControlName="userName" (change)="process($event.target.value)">
    <option [value]="user.name" *ngFor="let user of users">{{ user.name }}</option>
  </select>

  <!-- I would like to have access to the entire object -->
  <!-- <select formControlName="userName" (change)="processUser(user)" -->
  <!--   <option *ngFor="let user of users">{{ user.name }}</option> -->
  <!-- </select> -->
</form>

<span>The value is: {{ form.get('userName').value }}</span>

TS:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  form: FormGroup;

  users = [
    { id: 1, name: 'John' },
    { id: 2, name: 'Mary' },
    { id: 3, name: 'Michael' }
  ]

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.form = this.fb.group({ userName: [null] });
  }

  process(userName) {
    console.log(userName);
  }

  // Here I need the entire user object
  processUser(user) {
    // do stuff
  }

  // I can always do this (in my case names are guaranteed to be unique)
  // but it's a really ugly workaround
  processUserWorkaround(userName) {
    const user = this.users.find(u => u.name == userName);
    //do stuff
  }
}

Full Stackblitz

Answer 1

您可以使用 $event.target.selectedIndex 在更改事件中访问选定的索引。您可以使用此索引从 users 数组中获取整个对象并将该对象传递给 processUser 方法。

例子

<select
  formControlName="userName"
  (change)="processUser(users[$event.target.selectedIndex])"
>
  <option *ngFor="let user of users" [value]="user.name">{{ user.name }}</option>
</select>

Stackblitz

https://stackblitz.com/edit/angular-7kjrps

Angular 响应式表单仅将对象的一部分映射到 formControlName

Angular Reactive Forms map only part of object to formControlName

angular

angular-reactive-forms

例子

Stackblitz