使用角度形式ControlValueAccessor和mat自动完成

Question

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

<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*函数。。所以整个对象都通过了。。为什么？

Answer 1

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

然后得到company.name作为输入值<mat-option [value]="company.name">