如何在Angular的嵌套自定义表单控件中处理触摸的通知

时间:2019-04-05 19:20:42

标签: angular forms

我通过实现ControlValueAccessor来构建自定义表单控件。我希望原始的自定义表单控件是可组合的,并且更高阶的表单控件基于这些原始。

简单的例子:

  

所以说我从控件中构建了一个DateField自定义,它仅包含一个<input />

     

然后我从控件中构建一个Calendar自定义,它是一个日历组件,具有其自身固有的复杂性,并带有一堆<div><button>作为模板。

     

然后,我想通过构成DatePickerDateField组件的控件来构建Calendar自定义。

在我的表单控件中,我需要通过正确实现updateOn通知来处理touched选项。

对于DateField,这很容易,文档中的示例说,只要输入模糊即可通知被触摸。
对于Calendar来说,它不那么容易,但是可以通过检查按钮模糊以及下一个焦点项目不在Calendar内来进行检查来实现。
因此,这两个表单控件可以很容易地遵循updateOn选项。

现在让我们看一下DatePicker。它由DateFieldCalendar组成,因此要正确处理触摸的通知,当DateFieldCalendar失去焦点时,我需要触发它。我不能简单地听更改事件,因为即使它们发生冒泡,也会破坏Calendar自定义表单控件提供的特定触摸机制。
在编写这两个表单控件时,我可以访问它们的FormControl模型。 FormControl#touched属性很方便,但在我的情况下却没有用,因为我需要“监听”触摸更改,但似乎不是这样的事件或流。

我还没有找到使用简单的ControlValueAccessor实现方式来实现这一目标的好方法。因此,我开始在自定义窗体控件上创建专门的输出,以使其触发“触摸”通知,但这并不令人满意,因为如果我共享我的海关表单控件,则必须学习如何使用Angular表单,然后学习我的专门输出以及什么就是这个意思。

我可能错过了一些东西,希望有人可以提供自己关于该问题的看法。

0 个答案:

没有答案