时间戳

首页 > 解决方案 > FormControl 显示值

angular - FormControl 显示值

问题描述

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

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

为什么我需要它：

我使用角度材料自动完成，它将 FormControl 的值设置为对象（来自选定的 mat-option）并通过 displayWith 将值显示为字符串。我想在从服务器获取数据时重复这种行为以获得一些一致性和便利性

标签： angularangular-reactive-formsangular-forms

解决方案

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

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

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

在模板中

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

在控制器中

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

板工

推荐阅读