问题标签 [controlvalueaccessor]

我正在尝试使用 Angular 8 创建自定义输入组件。我想使用 JSON 元数据动态加载该自定义输入组件。当我渲染组件时，我想使用 Reactive 表单将值绑定到它。父组件将创建表单组，我将相应地设置我的自定义组件 formControlName。

我尝试将 ControlValueAccessor 接口添加到组件并实现了接口方法。但是它们都没有触发。我还为我的组件 NG_VALUE_ACCESSOR 提供了提供程序。

文本框模板代码：

指令代码：

根组件模板

根组件.ts 文件

示例 json：我们从服务方法中获得

期望执行接口方法。但是没有一个接口方法正在执行/调用。因此没有发生绑定。

我正在处理 Angular 中的一个棘手问题。我想创建一个自定义表单组件，它“捆绑”了几个子输入元素，并且在所有子元素都有效时有效。

我以为我只需创建一个实现 ControlValueAccessor 和 Validator 接口的组件。我会将 ViewChildren 装饰器的输入作为 NgModel 注入，这样我就可以遍历它们并在组件的 validate 方法中收集任何验证错误。这是我制作的地址输入组件的示例实现，它对两个都需要一个值的输入（街道和街道号码）执行此操作：

当我将地址组件嵌入到这样的表单中时，这通常可以正常工作：

唯一但令人讨厌的问题是，当地址输入组件将通过模型绑定正确填写时，地址输入组件仍将保持无效状态。

即当包含自定义表单组件的表单的应用程序组件定义它绑定到自定义表单组件的地址字段时，如下所示：

自定义表单组件应该有效但仍然无效。

例如，当我在字段中添加字母或数字时，自定义表单组件立即生效。

经过一番调查，我注意到这是因为 Angular 在调用自定义表单组件上的 ControlValueAccessor 接口的 writeValue 方法后立即调用了 Validator 接口的 validate 方法。这样，当 Angular 在自定义表单组件上调用 validate 方法时，自定义表单组件的子输入的值及其验证状态尚未更新。

为了解决我的问题，我想知道是否有任何方法可以强制 Angular 更新 ngModels 的值和验证状态，或者在更新子输入/组件时再次运行验证。或者，如果有任何其他方法可以使这项工作。更广泛地说，我还想知道是否有更好的方法来实现一个表单组件，当它的所有子组件都有效时，它是有效的，因为我觉得解决这个问题需要一些“黑客”或低效的代码。

您可以在此处找到包含该问题的简单再现的Stackblitz 。

提前感谢您的时间和帮助，约书亚

我正在使用 Angular 7，我创建了一个 customForm 组件（称为app-lav-input），即继承自ControlValueAccessor.

这就是我的使用方式app-lav-input：

HTML：

组件代码：

如果使用，我想在app-lav-input模板中添加一个“*” Validators.required。

我可以添加另一个输入，app-lav-input但从 formControl 获取此信息会更好。

如何从app-lav-input组件的代码中访问这些信息？

我正在制作一个自定义日期选择器组件，以便它可以与本地化和 moment.js 以及反应形式一起使用。

我已经设置了组件，但是在 DateChange 事件之后，在它退出区域后，它会抛出一个错误：

目前，我不知道如何修复它，尽管我试图修复它，ChangeDetectorRef这使得我的验证无法触发，类似的事情也会发生在this.control.updateValueAndValidty().

毕竟，它发生得比我触发任何事情都要晚很多。我想这是输入元素的问题，所以我会尝试同时捕捉它的变化事件。

所以这是date-picker.component.ts：

这是date-picker.component.html：

我正在通过返回带有值或的对象来更改父组件中的min和值。同一个选择器有多个实例，所以我发送字符串值来区分它们。maxnew Date(year, month, day)null

我试图构建可重用的 datepicker 组件，该组件将具有本地化、特定的日期格式，并且可以轻松地合并到反应式表单中，因此我可以使用其余的表单数据对其进行验证，并显示Validation.required错误。

不幸的是，我不知道从哪里开始调试它。

编辑：我试图制作一个stackblitz，但它给了我很多错误，但仍然是： https ://stackblitz.com/edit/angular-aylptw

我有一个实现 ControlValueAccessor 的自定义控件，并且仅与反应形式一起使用。在自定义控件中，我如何知道何时分配或删除了所需的验证器？

我不想只为必需的属性创建一个@Input，因为它仅用于反应形式。

我创建了一个带有值访问器的自定义输入控件。

这是我之前的代码

我想访问表单控件，所以我将逻辑更改为此。

我的问题是我使用此输入仅在某些地方显示值并且不包含任何形式。所以我使用一个输入参数来设置这个输入的值。

我正在使用第一种方法。

但是在我将逻辑更改为上面之后，没有 ngModel 或 formControlName 它给了我下面的错误。

如何通过此实现避免此错误？

我有一个指令可以在不更改控制的情况下将 DecimalPipe 执行到输入值中，或者更好的是，我在不更改输入值的情况下更改控制。

预期结果是：DecimalPipe 到输入值（如字符串）并将浮点数解析为 FormControl 值，它没问题，只是没有被继承..

我使用一个组件逐步为addValue赋予功能，并通过ControlValueAccessor访问该组件。但是，“内”和“外”形式打印的值是不同的。

StackBlitz：https ://stackblitz.com/edit/angular-enbqmf

我有实现 ControlValueAccessor 的类（来自'@angular/forms'）：

这给了我一个在线构建错误： private onChange = (_) => {};

并说：错误 TS7006：参数“_”隐式具有“任何”类型。

知道如何解决这个问题吗？

我已经在我的应用程序中实现了控制值访问器，但是在运行应用程序时我收到以下错误消息：

这就是我的设置方式：

AnnouncementInformationListComponent.html

多选.component.ts

多选.component.ts

多选.component.ts

值得注意的是，AnnouncementInformationListComponent.html 中的所有其他输入字段（未使用控制值访问器）都可以正常工作。另外，当我用谷歌搜索错误消息时，我很难找到其他有同样问题的人，我觉得这很奇怪。任何想法可能是什么问题？

我使用 ControlValueAccessor 制作了一个自定义 Angular (8.x) 组件。使用两个或多个组件时，我在 Safari（桌面和移动设备）中有奇怪的行为。当我单击第二个输入元素时，焦点会跳回到第一个。我究竟做错了什么？

请参阅https://stackblitz.com/edit/angular-qcgefd。

在 Chrome 和 Firefox（桌面和移动）中一切正常