Question

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

例如，从服务器获取某个对象-{id: 1, name: "Name1"}，然后将FormControl的value设置为该对象或object.id，但将display value设置为object.name-“ Name1 “。

为什么我需要它：

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

Answer 1

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

需要使用 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
 })

planker

Answer 2

您也可以只使用 setValue() 两次。首先将控件值设置为要显示（查看）的值。然后使用您要保存的值（模型）再次设置控件值，但这次不更改视图，使用 {emitModelToViewChange: false}

  this.form?.controls.country.setValue('Value to display')
  this.form?.controls.country.setValue('realValue', {emitModelToViewChange: false});

Answer 3

另一种方法是在 FormGroup 中使用 [ngModel] 和 (ngModelChange)。请记住，formControl 始终存在。这个想法很简单。假设你有一个 FormGroup

form=new FormGroup({
   control:new FormControl()
})

<form [formGroup]="form">
   <input [ngModel]="form.get('control').value?form.get('control').value.name:''"
       (ngModelChange)="form.get('control').setValue({id:$event})"
       [ngModelOptions]="{standalone:true}">
</form>

但是，如果您使用 mat-autocomplete，则缺陷会分配给 formControl 对象，您还可以“初始化”formControl :(。是 docs

中的第二个示例

FormControl显示值

3 个答案: