问题标签 [controlvalueaccessor]

我希望在输入值时对其进行验证并进一步传递或不传递。

我可以从 validate 方法中删除传递逻辑吗？

我的意思是我们如何在控制器内部监听错误，而不将副作用代码放入 validate 方法中？

我创建了自定义角度材质控制，并实现了 ControlValueAccessor。提交表单时，如果它无效，我会触摸所有控件以使其显示验证错误。由于某种原因，我的自定义控件被突出显示，但不显示错误文本。这是一个测试项目。 https://stackblitz.com/edit/angular-a2rrbx

我实际上已经找到了解决方案——实现 DoCheck 并在那里检查触摸状态，然后发出 stateChanges。但我想知道是否有更好的解决方案，不涉及 DoCheck，因为它可能会很昂贵。此处描述了该解决方案：我如何知道自定义表单控件何时在 Angular 中被标记为原始？. 我也想避免猴子修补。

我也无法理解为什么会这样 - 控件被突出显示，所以它看到了触摸状态，这非常令人困惑。

谢谢！

正如我在这个答案中描述的那样，我创建了一个自定义 ControlValueAccessor 指令来控制何时触发我的组件的 onChange 事件，并且一切正常，除非我对其进行测试，否则永远不会调用 registerOnChange，因此我的测试失败。

我的指令如下所示：

我的测试：

根据我在“在 Angular 表单中实现 ControlValueAccessor 时不再感到困惑”中所读到的内容，我假设只是将 FormControl 添加到我的输入字段就应该触发 setupControl，但显然情况并非如此。我错过了什么？

我正在尝试使用该ControlValueAccessor界面创建自定义 FormControl。我的目标是从父表单中的自定义 FormControl 中取回如下对象（示例）：

我的自定义表单控件（为简洁起见省略了装饰器）：

父表格：

在父表单中，我从自定义表单控件中获取值。但是一旦我尝试从父表单设置一些初始值，它们都不会出现在自定义表单中。我的理解是，我需要在自定义控件的内部映射从父级接收到的对象，FormGroup但我不确定在哪里以及如何。帮助将不胜感激。此外，欢迎对此提出更好的方法（如果有）的意见。

编辑

回答我为什么要尝试实现这一点：我有一个非常大的表单，并且与上面给出的这个示例对象有关的一部分实际上是动态的——这意味着我需要在最后存储这些对象的数组。为了消除一些混乱，我试图将此部分移动到单个表单控件中，以便我可以使用 aFormArray来处理它。

我正在使用 Angular v6.0.0，我的组件是实现 ControlValueAccessor；
在更改事件中，我看到它总是旧值，但是当绑定 ngModel 的值时，它是新值。我做了一个stackblitz 例子；

我正在尝试使用 Angular 6 Forms 进行协同浏览。在共同浏览开源库时，JS 会更新远程方对应元素的 DOM 值。我已经在 index.html 中更新了与 JS 相关的代码（头中的两行，正文中的另一行）我使用 ControlValueAccessor 观察到相应元素的表单类型 DOM 值正在更新，但 FormControl 值在视图中没有得到更新。我的问题是外部库对 DOM 元素所做的更改如何反映到角度 6 表单控件的元素值中。

可以从以下链接获取代码： https ://github.com/srigaurav1986/Angular-Forms.git

如何重现：
1.从上面的链接下载代码。
2.使用“npm install”安装依赖项 3.运行
“ng serve -o”
4.在浏览器中打开“ http://localhost:4200/controlvalueaccessor ”
5.单击“Start TogetherJs”
6.将弹出的链接复制到另一个浏览器窗口。
7.更新“名称”字段

我们可以看到远程端的 DOM 字段值也在更新，但是在按下“提交”按钮后，我们可以看到 FormControl 值在远程端保持不变，但在另一端发生了变化。

我尝试使用 application.tick、markforcheck() 和 detectchanges() api 手动检测更改，但没有运气。有没有办法，我们可以监听 DOM 元素更改的某些事件并订阅它并更新 Formcontrol 参数值在这种情况下。

为了展示一个真实世界的例子，假设我们想在我们的应用程序中使用@angular/material 的日期选择器。

我们想在很多页面上使用它，所以我们想让它很容易地添加到任何地方都具有相同配置的表单中。为了满足这个需求，我们在一个带有 ControlValueAccessor 实现的周围创建了一个自定义的角度组件<mat-datepicker>，以便能够[(ngModel)]在它上面使用。

我们希望处理组件中的典型验证，但同时，我们希望使验证结果可用于包含我们的CustomDatepickerComponent.

作为一个简单的解决方案，我们可以实现这样的validate()方法（innerNgModel 来自导出的 ngModel: #innerNgModel="ngModel"。请参阅本问题末尾的完整代码）：

此时，我们可以以非常简单的方式（如我们所愿）在任何表单组件中使用日期选择器：

<custom-datepicker [(ngModel)]="myDate"></custom-datepicker>

我们还可以扩展上面的行以获得更好的调试体验（像这样）：

只要我更改自定义日期选择器组件中的值，一切正常。如果日期选择器有任何错误，则周围的表单仍然无效（如果日期选择器有效，则它变为有效）。

但！

如果myDate外部表单组件的成员（作为 ngModel 传递）被外部组件更改（如：）this.myDate= null，则发生以下情况：

1. writeValue()CustomDatepickerComponent 运行，它更新日期选择器的值。
2. CustomDatepickerComponent的validate()运行，但此时innerNgModel没有更新，因此它返回早期状态的验证。

为了解决这个问题，我们可以在 setTimeout 中从组件发出更改：

在这种情况下，emitChange（自定义组件的广播更改）将触发新的验证。并且由于 setTimeout，当 innerNgModel 已经更新时，它将在下一个周期运行。

我的问题是，是否有比使用 setTimeout 更好的方法来处理这个问题？ 如果可能的话，我会坚持模板驱动的实现。

提前致谢！

示例的完整源代码：

自定义 datepicker.component.ts

和模板（custom-datepicker.compnent.html）：

周边微模块（custom-datepicker.module.ts）：

以及部分外部表单组件：

我想在 Angular 5 中实现一个带有控制值访问器的功能。这就像从父级访问子自定义组件中的多个表单控件。请让我知道我是否可以通过其他方式实现这一目标。模板驱动形式是强制性的。

如果有任何其他可以通用创建具有双向数据绑定的自定义控件，请告诉我。如果答案在 Plunker 或 StackBlitz 中，那就太好了。

这是我的：https ://stackblitz.com/edit/angular-qzioet

父组件：-

父 html:-

<app-input name ='name' [(ngModel)]="personal.identity.name" [form]="personalForm" ngDefaultControl></app-input>

子组件：-

子html：-

我多次创建了一个自定义输入组件。我可以成功设置 [(ngModel)] 接收到的初始值，但是没有处理对输入字段的任何更改。更准确地说： writeValue 最初被调用，而 setter 则没有。

该组件如下所示：

父组件中的 HTML 是这样的：

我提到了这个链接：http ://tylerscode.com/2017/03/splitting-angular-forms-controlvalueaccessor/#respond

我想使用控制值访问器和模板驱动表单验证子组件中的所有字段。

（这是 Stackblitz 上的问题链接：https ://stackblitz.com/edit/angular-qzioet ）