使用角度形式ControlValueAccessor和mat-autocomplete

如何解决使用角度形式ControlValueAccessor和mat-autocomplete

我有一个可能以前有人遇到过的问题。

  <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 : '';
  }

所以问题是我希望控件仅传递company.id ..但没有触发registerOn *函数。因此整个对象都传递了。关于为什么的想法？

解决方法

displayWith将映射到control.value，因此它需要返回公司ID。

然后将company.name用作输入值<mat-option [value]="company.name">