如何从 valueChanges 获取选定的对象，但仅使用 Angular 反应形式将对象 id 绑定到表单？

Question

I have a select field that allows me to choose a car and the car id gets bound to the form.

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

I'd like to get the instance of the car so that I can grab other info off of the object, but I can't do that using valueChanges as it only gives me the id:

this.form.get('carId').valueChanges.subscribe(carId => { ... );

I could change the select field to bind the object instead of the id like this:

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

But then the whole object is being bound to the form instead of just the id which would mess up my form submission.

Is there an elegant way to get the selected object but still bind just the id to the form?

Answer 1

You have the carId so just lookup the car object in your cars array in the valueChanges.

It is much easier to change to the car value instead of the id and change your submit logic though.

Answer 2

It's a little clunky, but I found a way that I can live with. I bind my select field to a stand-alone FormControl so changes to it don't affect the form by using [formControl]= instead of 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>

Then I can subscribe to changes on that, do what I need with the car, and set the carId on the form.

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);
});

This works, but to get it to work with Angular Material error handling (so the field turns red if not specified) I had to add a hidden input bound to the 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>

Update I'm still not happy with this solution because I'd also have to ensure that the car select is in sync when form.setValue() is called, which means I'd have to lookup the car from it's id - so I might as well do the lookup on the select change or modify the submit logic like Alexander's answer says.

I'll keep this answer out here in case it helps anyone, but I'm still open to other ideas.