问题标签 [controlvalueaccessor]

在我自己实施解决方案之前，我想知道当数据绑定属性值刚刚更改时，是否有一种简单的方法可以更改元素的样式（简短的突出显示）。

我的 DOM 中有很多元素，所以我不想在组件中存储和维护专用属性。

我要强调的元素是传统输入表单的元素：

我听说过 Angular2 在带有 ngModel 指令的元素上设置的特殊类样式可以帮助我做我需要的事情，但我找不到更多关于它的信息。

我在自己的原始组件中实现了 ControlValueAccessor。你看到它的代码： 那里（plunker）

在父组件中，我使用我的 with ng-if 指令。我可以通过复选框隐藏和显示我的组件。组件每次初始化和销毁​​，但 writeValue 函数调用了很多次。请在 plunker 检查我的代码

为什么会这样？我该如何解决这个问题？

我有一个自定义表单组件。我在模板驱动的表单上使用我的组件。如何将我的组件包含到 form.controls 集合中，类似于 form.controls 中的输入字段？我想找到我的组件来决定它是否脏。我的组件正在包装第三个。未实现 ControlValueAccessor 的派对 UI 组件。

下面调用我的组件 se：

我有一个演示/哑组件，它使用输入来使用 formBuilder 填充 HTML 模板。这一切都很好，但是当我开始测试它时，事情并不像他们应该的那样顺利。

我想测试一些文本框是否正确填充了我的输入值。我希望 formGroup 在我之后更新我的 HTML：

1. 设置输入
2. 呼叫检测变化
3. 调用 ngOnInit

在我的测试中，我使用默认行为覆盖 OnPush 检测策略。

最终我的目标是使用 Jest 对这类组件进行快照测试，因为它使比较属性变得更加容易，但要做到这一点，我首先需要能够正确呈现我的 HTML。

我正在使用 Jest 运行测试，我相信它使用 JsDOM。

我的 app-network-details 组件如下所示：

这是我的测试设置：

编辑： 我已经设法隔离了问题。由于我的 NetworkDetailsComponent，我的测试失败了。我可能没有正确实现 ControlValueAccessor 接口。如果我重写我的测试并在具有 formControlName 指令的输入元素上断言，它可以工作。

我有一个自定义 ControlValueAccessor，它只是在输入上附加一个货币符号。

只是将CurrencyPipe字符串解析为数字并将数字转换为货币字符串（具有本地化的十进制分隔符和货币符号）。

当我尝试像这样使用 ReactiveForms 时：

...然后onChange()不会在手动输入时触发。

我有一个解决方法，我订阅valueChanges了控件，然后执行

...成功触发onChangeControlValueAccessor。（patchValue没有选项的 A 也会做同样的事情，因为true是这个选项的默认值。我只是想在这里指出罪魁祸首。）

但我很想使用一个内置的解决方案，它不能解决额外需要的检查和至少两个 valueChanges。

一个简化的 Plunker 试用：https ://embed.plnkr.co/c4YMw87FiZMpN5Gr8w1f/ 请 参阅src/app.ts.

1. 我有一个ImageHandler实现ControlValueAccessor.
2. ImageHandler应该在另一个组件中动态生成，并且视图将被嵌入。可以毫无问题地设置输入和输出。但是如何应用于formControl该嵌入式视图或组件。

<image-handler [formControl]='fControl'></image-handler>

主要问题是这个 formControl 必须应用于图像处理程序本身，否则它可以通过fControl作为输入传递并应用 in 来设置ImageHandlerComponent。

当前解决方法：创建一个WrapperComponentforImageHandler或任何其他类似的组件。这些基于参数的包装器显示带有表单控件的特定元素。 <image-handler *ngIf='isImagehandler' [formControl]='fControl'></image-handler> ...

这个包装器组件可以毫无问题地动态创建。但这似乎不是一个真正的解决方案。

我在 Angular 中创建了一个自定义控件，比如my-select-input ，它包装了原生选择输入。模板看起来像这样。

我的选择输入组件看起来像这样。

组件还扩展了一个实现 controlvalueaccessor 的类。

当我尝试使用这样的组件时：

ngValue 被完全忽略，我得到的值是选项标签之间的文本。我使用 ngValue 在其中存储一个对象。不知道这里有什么问题。任何帮助表示赞赏。

控制使用 value 属性而不是 ngValue 可以很好地工作。

类似问题 - https://github.com/angular/angular/issues/22374

我在 Angular 库中创建了一个下拉列表，以在我们的应用程序中使用。我使用 angular-material2 作为下拉菜单（mat-select 和 mat-autocomplete）。

我一定是做错了什么，因为我在应用程序中使用下拉菜单时没有得到值。我已经尝试了几乎所有在网上找到的东西，但没有结果。

我评论了大部分内容，我正在尝试解决最简单的版本，但即使在这种情况下，我也没有得到价值。这是我现在拥有的：

DropdownComponent.html 库：

DropdownComponent.ts 库：

DropDownComponent.html 应用程序：

DropdownComponent.ts 应用程序：

库中 writeValue 中的 console.log 为我提供了我在下拉列表中选择的值，但 saveSelect 中的 console.log 显示为 null。因此该值不会发送给父级。知道我做错了什么吗？先感谢您。

我有两个 div，一个包含一个日期选择器/日历，允许用户选择他们想要的日期，第二个包含带有电子邮件、citym 和酒店的表单，

所以用户选择一个日期并填写表格并通过点击书提交。

这是我所拥有的

视觉上看起来像这样。

现在我可以只提交没有日期的表格，在谷歌搜索和谷歌搜索后发现没有任何帮助，

注意：我正在使用这个 datepicker ui：ignite -ui angular https://www.infragistics.com/products/ignite-ui-angular/angular/components/calendar.html

问题

如何将我的日历与表单集成并能够提交？

我希望这张图片能解释我想要做什么。

所以我想做一个共享相同formControlName的自定义无线电组件。单击单选时，共享相同 formControlName 的其余组件应更新为活动值。

我该怎么做？