angular - writeValue 在自定义表单控件中具有无效值

Question

当我想在 Angular 中创建自定义表单控件时，我需要实现 ControlValueAccessor ，它定义 writeValue(value:any): void 函数。

现在想象一下，由于其内部工作原理，自定义组件仅接受仅包含数字的字符串。它不能接受任何其他东西，因为它不能用它做任何有意义的事情。

当有人使用无效值调用 formControl.setValue() 时出现的问题:

• 该 formControl 的值应该是多少(null 或无效输入)？
• 如果输入无效，writeValue是否应该使用null调用onChange回调，以便Angular知道该值未被接受？<

Answer 1

我也遇到过类似的问题。就我而言，我尝试为我们的选择组件设置不存在的值。

我查看了原生 select.value 属性和 jQuery 的 val 函数如何处理这个问题:

事实证明:el.value返回''并且jEl.val()返回null 。(https://codepen.io/mino123456/pen/VRGwYx)

所以我认为值应该返回null。

正如@Ludevik指出的，问题是在writeValue中调用onChange会将值设置为null，但它也会触发valueChange 事件。这是不可取的，尤其是在:

formControl.writeValue('invalidValue', {emitEvent:false});

我查看了源代码，找到了在不触发事件的情况下设置值的方法。但我必须说，它感觉真的被黑了。

ngOnInit(): any {
  this._boundFormControl = this._injector.get(NgControl, null);
}

setControlValue(value: any): void {
  const dir = this._boundFormControl as any;
  const control = dir._parent.form.get(dir.path);
  control.setValue(value, {
    emitModelToViewChange: false,
    emitEvent: false
  });
}

基本思想是从父级获取formControl，并使用emitEvent: false调用setValue。如果 Angular 能提供更好的方法，我会喜欢。