Javascript 如何从valueChanges中获取所选对象，但仅使用角度反应窗体将对象id绑定到窗体？

我有一个select字段，允许我选择一辆汽车，汽车id将绑定到表单

<mat-form-field>
  <mat-label>Car</mat-label>
  <mat-select formControlName="carId">
    <mat-option *ngFor="let car of cars | async" [value]="car.carId">
      {{car.carName}}
    </mat-option>
  </mat-select>
</mat-form-field>

this.car = new FormControl([null, Validators.required]);
this.car.valueChanges.subscribe(selectedCar => {
  // Do whatever with selectedCar here
  this.form.get('carId').setValue(selectedCar ? selectedCar.carId : null);
});

我可以更改select字段以绑定对象，而不是像这样绑定id：

<mat-form-field>
  <mat-label>Car</mat-label>
  <mat-select formControlName="carId">
    <mat-option *ngFor="let car of cars | async" [value]="car">
      {{car.carName}}
    </mat-option>
  </mat-select>
</mat-form-field>

汽车
{{car.carName}

但是，整个对象被绑定到表单上，而不仅仅是id，这会扰乱我提交表单的过程

---

是否有一种优雅的方法可以获取所选对象，但仍然只将id绑定到表单？

您拥有carId，因此只需在VALUECHANGS中的cars数组中查找car对象

---

更改为car值而不是id和更改提交逻辑要容易得多。

这有点笨重，但我找到了一种可以接受的方法。我将我的选择字段绑定到一个独立的FormControl，这样对它的更改就不会影响表单，方法是使用

[FormControl]=

而不是

formControlName=

<mat-form-field>
  <mat-label>Car</mat-label>
  <mat-select [formControl]="car">
    <mat-option *ngFor="let car of cars | async" [value]="car">
      {{car.carName}}
    </mat-option>
  </mat-select>
</mat-form-field>

这是可行的，但为了使其能够处理角度材质错误（因此，如果未指定，字段将变为红色），我必须添加一个绑定到

carId

的隐藏输入

<mat-form-field>
  <mat-label>Car</mat-label>
  <input matInput formControlName="carId" style="display:none">
  <mat-select [formControl]="car">
    <mat-option></mat-option>
    <mat-option *ngFor="let car of cars | async" [value]="car">
      {{car.carName}}
    </mat-option>
  </mat-select>
  <mat-error *ngIf="form.get('carId').hasError('required')">
    Car is required
  </mat-error>
</mat-form-field>

汽车
{{car.carName}
汽车是必需的

Update我仍然对这个解决方案不满意，因为我还必须确保调用

form.setValue（）

时

car

select是同步的，这意味着我必须从它的id中查找汽车-因此我也可以像Alexander的回答那样查找select change或修改submit逻辑

我会把这个答案保留在这里，以防对任何人有所帮助，但我仍然愿意接受其他想法

<mat-form-field>
  <mat-label>Car</mat-label>
  <input matInput formControlName="carId" style="display:none">
  <mat-select [formControl]="car">
    <mat-option></mat-option>
    <mat-option *ngFor="let car of cars | async" [value]="car">
      {{car.carName}}
    </mat-option>
  </mat-select>
  <mat-error *ngIf="form.get('carId').hasError('required')">
    Car is required
  </mat-error>
</mat-form-field>