如何在自动完成组件中显示焦点和模糊的不同值

Question

我试图显示不同的值取决于焦点/模糊自动完成输入。

假设我们对每个项目都有id和的项目有建议desc。我想通过id和过滤项目desc。当我选择其中之一并且输入模糊时，应该有id并desc显示（例如 1 - item01）。

当焦点回到输入上时，它应该只显示id（没有desc），如果有任何建议id（比如 10 在那里，它应该建议 1010 | desc ）。现在我必须强行擦除desc才能回到id. 不应该是这样。

感谢您的任何建议。

查看图像上的预期行为：

Answer 1

控制值存取器 (CVA)该ControlValueAccessor界面是你在找什么。为什么？该接口将 DOM 与 Angular Form 分离，允许显示下拉和输入与表单实际使用的值不同。您可以将自定义输入实现为单独的组件*并传入 FormControl。以下是未经测试的工作 Stackblitz*编辑 3 - 我相信也可以将其作为指令来实现。请参阅 - 实现 ControlValueAccessor 的 Angular 2 指令不会在更改时更新“已触摸”属性黑匣子外你的app.component.html最终看起来像。<form class="example-form">&nbsp; <app-auto-special [users]="options" [formControl]="myControl"></app-auto-special></form>app-auto-special就像一个黑匣子，它只关心用户 ID。我们可以 patchValue 或 setValue ，它会做它的事情（在内部调用writeValue）。如果我们与该组件交互，我们将获得 FormControl 值的用户 ID。编辑- 没有什么能阻止你传递整个 User 对象。我假设 OP 基于这个问题想要 id。编辑 2 - 传递用户对象而不是工作 Stackbliz 的示例黑匣子里面我们需要使用 NG_VALUE_ACCESSOR将app-auto-special组件注册为 controlValueAccessor 的提供者。这是通过以下方式完成的：&nbsp; providers: [{&nbsp; &nbsp; provide: NG_VALUE_ACCESSOR,&nbsp; &nbsp; useExisting: forwardRef(() => AutoSpecialComponent),&nbsp; &nbsp; multi: true&nbsp; }]所以在黑盒子里我们实现了由 4 个方法组成的接口：writeValue(obj: any): voidregisterOnChange(fn: any): voidregisterOnTouched(fn: any): voidsetDisabledState(isDisabled: boolean)?: void这通常意味着以下样板：export class AutoSpecialComponent implements ControlValueAccessor {&nbsp; public _value: number;&nbsp; public disabled: boolean;&nbsp; onChanged: any = () => {};&nbsp; onTouched: any = () => {};&nbsp; /*&nbsp; * ControlValueAccessor boilerplate&nbsp; *&nbsp; */&nbsp; writeValue(value): void {&nbsp; &nbsp; this._value = value&nbsp; }&nbsp; registerOnChange(fn: any): void {&nbsp; &nbsp; this.onChanged = fn;&nbsp; }&nbsp; registerOnTouched(fn: any): void {&nbsp; &nbsp; this.onTouched = fn;&nbsp; }&nbsp; setDisabledState(isDisabled: boolean): void {&nbsp; &nbsp; this.disabled = isDisabled&nbsp; }}我们制作了registerOnChangeand提供的函数的副本，并在我们想要更新 formControl 值或它在 touch 属性上时registerOnTouched调用这些副本（this.onChanged和this.onTouched）。setDisabledState是可选的，writeValue在初始化时或当我们从父级调用patchValue或时调用setValue。要设置我们调用的 FormControl this.onChanged(some_value);，我们可以挂钩各种事件input, focusin, blur，optionSelected并决定分别发生什么：表单控件值显示哪些选项输入中应该是什么显示字符串这个答案附带了一个警告，即这是我完成的第一个 CVA 实现之一，所以我在基础上摇摇欲坠。额外的好处单元测试 - 独立的 DOM 显示与表单逻辑分离——父级不再饱和