问题标签 [controlvalueaccessor]

更新： 异步验证问题已成功解决。但是初始验证状态还有另一个问题。查看最新答案。

这是诀窍：

• 具有实现 ControlValueAccessor 接口的组件用作自定义控件。
• 该组件在某些反应式表单中用作 FormControl。
• 此自定义控件具有异步验证器。

问题：

值更改后立即调用来自 ControlValueAccessor 接口的方法 validate() 并且不等待异步验证器。当然，控制是无效的和未决的（因为正在进行验证），主窗体也将是无效的和未决的。一切正常。

但。当异步验证器完成验证并返回 null（表示值有效）时，自定义控件将有效并且状态也更改为有效，但父级仍然无效且处于挂起状态，因为来自值访问器的 validate() 尚未再次调用。

我试图从 validate() 方法返回 observable，但主窗体将其解释为错误对象。

我找到了解决方法：当异步验证器完成验证时，从自定义控件传播更改事件。它迫使主窗体再次调用 validate() 方法并获得正确的有效状态。但它看起来又脏又糙。

问题是： 必须做什么才能使父表单由来自子自定义控件的异步验证器管理？必须说它与同步验证器配合得很好。

所有项目代码都可以在这里找到： https ://stackblitz.com/edit/angular-fdcrbl

主要表格模板：

主窗体类：

自定义子控件模板：

自定义子控件类：

我正在使用controlvalueaccessor我的反应式表单，其中我有一个文本框，该文本框禁用了我正在使用的一个文本框setdisabledstatefunction 。

现在我需要为那个文本框写一个点击事件，我卡在那个部分，不管它是否可能。请给我一些解决方案。
.html

.ts

<mat-error>formControl在子 ControlValueAccessor 组件中对父验证没有影响。

我是否需要在这里添加一些额外的配置才能<mat-error>在父级上显示formControl无效

这是简单的自定义表单控件

使用如下：

我不明白的是为什么控件的 ngModel 仅从外部输入的更改值更新，但在使用内部输入的情况下不更新？现场示例：https ://stackblitz.com/edit/angular-7apjhg

编辑：

通过更简单的示例（没有内部输入）可以看到实际问题：

单击自定义控件内的按钮后，父级上的属性值会更新，但 ngModel 不会。更新示例：https ://stackblitz.com/edit/angular-tss2f3

我有一个指令来为模板驱动的表单构建动态输入组件。默认值由 Input 组件本身设置。

问题是设置默认值会导致表单被标记为脏。

如何在不将表单标记为脏的情况下从指令内部归档设置默认值？

更新

我创建了一个StackBlitz

我有一个自定义表单控件，它实现ControlValueAccessor. 我用一个值初始化反应表单组和控件。我想在控制组件内部改变该值，并让外部形式获得该突变值。

onChange()当我与控件交互并通过 UI 设置新值时，这可以很好地发出事件，但是初始值（通过 设置FormBuilder）在内部更改时不会触发form.valueChanges事件，因此表单永远不会具有修改后的值您永远不会通过 UI 更改控件的值。

我想出如何确保表单看到变异值的唯一方法是将 a 包裹setTimeout在this.onChange(this.value)调用周围，这似乎是错误的。试图弄清楚是否有人尝试过这个并找到比 更好的解决方案setTimeout？

这是一个非常精简的 stackblitz 来展示场景：https ://stackblitz.com/edit/angular-t28bst?file=src%2Fapp%2Fform-control%2Fform-control.component.ts

您可以看到内部的值是“hello world”，而外部的表单仅显示“hello”，除非您单击控件内的 Update Value 按钮（仅设置value = value）然后表单会看到它。或者，您可以取消注释setTimeout周围的onChange()呼叫，看看它也有效。

编辑：通过重写 email-phone-input.component.ts 以使用 ControlContainer，从父级获取 FormGroup 以及 FormArray 控件，我设法使数据传递和验证工作完美。将使用工作代码更新存储库并回答问题。

我试图让验证器为表单组工作，其中包含从带有表单数组的子组件发送的对象。

当前层次结构 - 单独的电子邮件组件、单独的电话组件（使用外部包），然后是包含用于电子邮件和电话的 FormArray 的电子邮件 + 电话组件，然后是具有单个表单控件的主表单，它从电子邮件 + 电话中获取数据零件。

我已经得到了所有的数据，但我不知道如何让验证器进入主表单。

链接到包含代码 + 演示的stackblitz 。https://stackblitz.com/github/rushvora/nested-form-playground

旁注 -Validators.required在将新的表单控件添加到表单数组时，不适用于电子邮件输入。

app.component.ts

app.component.html

电子邮件-电话-input.component.ts

电子邮件-电话-input.component.html

我目前正在使用自定义表单字段控件开发可重用组件。

我有这个自定义的自动完成控件，它返回一个对象作为它的值，然后我的可重用组件使用这个自定义控件将对象属性之一作为字符串传递给我的主窗体。这是一个闪电战来检查它：

https://stackblitz.com/edit/my-custom-autocomplete-jlkj9q

这在一个方向上工作正常，控制-> 可重用字段-> 表单。

以下是我从可重用组件更新表单值的方法：

现在，当我为可重用组件字段设置默认值时，控件会正确更新，但表单值不会。我尝试使用要传递给主窗体的值调用该onChange()方法，但什么也没发生。ngOnInit然后我尝试在 ngAfterViewInit 上设置默认值并onChange像这样调用：

但这也不起作用。
我在这里想念什么？有什么线索吗？

Angular 中的 ViewChild 和 ControlValueAccessor 有什么区别？似乎他们都可以访问子组件、指令、DOM。对用法的差异如此好奇，一个人能做另一个人不能做的事吗？

我已经input在我的 Angular 应用程序使用中创建了一个简单的自定义组件ControlValueAccessor。所以，当我想创建一个表单input元素时，我不必调用<input />，只需调用<my-input>。

我有一个问题，当我使用时<input />，我可以使用myDirective. 例如：

但是，当我使用 时my-input，我无法使用myDirective. 例如：

myDirective在我的输入中不起作用

这是my-input组件使用ControlValueAccessor代码：

更新： myDirective代码：

有没有办法myDirective在my-input组件中使用？

提前致谢。