FormControl显示值

Question

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

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

为什么我需要它：

我使用 angular material 自动完成，它将 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[=12 中的第二个示例=]

Answer 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
}

FormControl显示值

FormControl display value

angular

angular-reactive-forms

angular-forms