angular - FormControl 显示值

Question

如何在输入 FormControl 中显示一些不等于此 FormControl 值的文本？

例如，从服务器获取一些对象 - {id: 1, name: "Name1"} ，并设置 value FormControl 到该对象或 object.id 但 display value设置为 object.name - "Name1"。

为什么我需要它:

我使用 Angular Material 自动完成并将 FormControl 的值设置为对象(来自选定的垫子选项)并通过 displayWith 将值显示为字符串。为了一些一致性和便利性，我想在从服务器获取数据时重复这种行为

Answer 1

我为我的问题做了一些研究。

需要使用 FormControlDirective 和它的 valueAccessor.writeValue()用于设置输入的显示值(它使用渲染器)或作为替代 nativeElement.value .

和 FormControl 的 setValue()与 emitModelToViewChange = false用于设置 FormControl 值。

在模板中

<input [formControl]="ctrlF" #ctrlD="ngForm">

在 Controller 中

 @ViewChild('ctrlD', {read: FormControlDirective})
 ctrlD :FormControlDirective
 ...
 this.ctrlD.valueAccessor.writeValue("display value")
 this.ctrlD.control.setValue({foo: "foo", bar: "bar"}, {
     emitModelToViewChange: false
 })

planker