FormControl 显示值答案

【问题标题】：FormControl display valueFormControl 显示值
【发布时间】：2019-05-27 11:18:00
【问题描述】：

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

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

我为什么需要它：

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

【问题讨论】：

是否要将 id 作为隐藏值保留？在 formcontrol 中？
我想将对象保存在 FormControl 的值中，但将此对象中的字符串显示为角度材料自动完成功能

标签： angular angular-reactive-forms angular-forms

【解决方案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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案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 中的第二个示例

【讨论】：

【解决方案4】：

我订阅了 formControl valueChanges observable 并使用条件验证值，并在需要时将其重置：

this.myForm.valueChanges.subscribe( value => {
  if(this.validateFormValue(value)){
    this.myForm.patchValue(this.extractValue(value))
  }
})

validateFormValue(value){
  // if condition
  return true
  // else return false
}

extractValue(value){
  // return the value you want after calculation or extraction
  return value.realValue
}

【讨论】：