Using angular form ControlValueAccessor and mat-autocomplete

Question

I have a problem that perhaps someone have encountered before..

  <input matInput required type="text" [value]="ngControl.value.name"
    [placeholder]="costCenterTranslations.company | translate" [formControl]="ngControl?.control"
    [matAutocomplete]="companyAutoComplete" (input)="onChanged($event.target.value)"
    (blur)="onTouched($event.target.value)" />
  <mat-autocomplete #companyAutoComplete="matAutocomplete" (optionSelected)="onChanged($event.option.value)"
    [displayWith]="displayFn.bind(this)">
    <mat-option *ngFor="let company of companies$ | async" [value]="company">
      <span>{{ company.name }}</span>
    </mat-option>
  </mat-autocomplete>

constructor(
    private readonly _translation: TranslationService<Translations>,
    @Optional() @Self() public ngControl: NgControl,
  ) {
    if (this.ngControl != null) {
      // Setting the value accessor directly (instead of using the providers) to avoid running into a circular import.
      this.ngControl.valueAccessor = this;
    }
  }

  onTouched = (_value?: any) => {
    console.log('onTouched', _value);

  };
  onChanged = (_value?: any) => {
    console.log('onChanged', _value);
  }

  writeValue(company: Company): void {
    this.ngControl.control?.setValue(company);
  }

  registerOnChange(fn: any): void {
    this.onChanged = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

  displayFn(company?: Company) {
    console.log('displayFn:', company && company ? company.name : '');
    return company && company ? company.name : '';
  }

So the problem is that I want the control to pass only the company.id.. but none of the registerOn* functions are triggered.. so the whole object is passed.. ideas on why?

Answer 1

The displayWith will map to control.value so it needs to return the company id.

Then to get the company.name as input value the <mat-option [value]="company.name">