我通过实现ControlValueAccessor
来构建自定义表单控件。我希望原始的自定义表单控件是可组合的,并且更高阶的表单控件基于这些原始。
简单的例子:
所以说我从控件中构建了一个
DateField
自定义,它仅包含一个<input />
。然后我从控件中构建一个
Calendar
自定义,它是一个日历组件,具有其自身固有的复杂性,并带有一堆<div>
和<button>
作为模板。然后,我想通过构成
DatePicker
和DateField
组件的控件来构建Calendar
自定义。
在我的表单控件中,我需要通过正确实现updateOn
通知来处理touched
选项。
对于DateField
,这很容易,文档中的示例说,只要输入模糊即可通知被触摸。
对于Calendar
来说,它不那么容易,但是可以通过检查按钮模糊以及下一个焦点项目不在Calendar
内来进行检查来实现。
因此,这两个表单控件可以很容易地遵循updateOn
选项。
现在让我们看一下DatePicker
。它由DateField
和Calendar
组成,因此要正确处理触摸的通知,当DateField
和Calendar
失去焦点时,我需要触发它。我不能简单地听更改事件,因为即使它们发生冒泡,也会破坏Calendar
自定义表单控件提供的特定触摸机制。
在编写这两个表单控件时,我可以访问它们的FormControl
模型。 FormControl#touched
属性很方便,但在我的情况下却没有用,因为我需要“监听”触摸更改,但似乎不是这样的事件或流。
我还没有找到使用简单的ControlValueAccessor
实现方式来实现这一目标的好方法。因此,我开始在自定义窗体控件上创建专门的输出,以使其触发“触摸”通知,但这并不令人满意,因为如果我共享我的海关表单控件,则必须学习如何使用Angular表单,然后学习我的专门输出以及什么就是这个意思。
我可能错过了一些东西,希望有人可以提供自己关于该问题的看法。