问题标签 [controlvalueaccessor]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
262 浏览

angular - 允许主机组件设置自定义 mat-autocomplete 子组件服务器端的值

我有以下要求父组件有一个子垫自动完成组件,它在每个用户输入(500 毫秒的去抖动)上从服务器(json 文件)获取数据。我设法将数据从子窗体控件发送到父窗体控件,但是在为子组件设置默认值时遇到问题,因为-子组件中的数据尚不存在(它将在用户开始键入时填充)-要求需要获取出于性能考虑,来自服务器的数据,因为列表很大。3000条记录承载子组件的主机组件

主机 [App.Component]

子 [CountryautocompleteComponent]

国家.service.ts

国家.ts

国家.json

我的问题是:

1)如何设置从主机到子组件的值,其中数据来自服务器但尚未出现?如果这不合逻辑,还有什么替代方法,因为我想避免在子组件中填充保留列表,并且我想根据用户输入返回一个子集。

我还准备了一个stackblitz 演示

但我面临版本依赖问题

0 投票
1 回答
710 浏览

angular - 使用 formcontrol.setError() 将错误传播到自定义控件组件

我已经使用 Angular 提供的 controlValueAccesor 接口创建了一个自定义表单控件组件。

现在我正在使用这样的自定义组件。

家长:

它工作正常,符合预期。当我尝试运行setErrors方法时出现问题,因为我希望错误传播到自定义组件,以便我可以显示从组件外部发送的错误。

custom-control在我这样做时使用的父组件中:

在我的自定义控件组件的模板中,我可以看到这个

有什么建议么?

0 投票
1 回答
120 浏览

angular - Can Angular value accessor return only one variable instead of object?

enter image description here

I have a nested form. Parent form has two controls: phoneInfo and remember.

Is there a way for child form to return only one value (fullPhone) instead of entire object?

Desired result:

I have tried using ControlValueAccessor

Current providers in child form:

Control value accessor interface:

0 投票
1 回答
276 浏览

angular - 使用 controlValueAccessor 的自定义组件 - ts-Lint 错误:在定义之前使用了组件

这是我的 RatingInputComponent 的 @component 装饰器中使用的提供程序。

我收到一个 ts-lint 错误:在定义之前使用了“RatingInputComponent”。但forwardRef允许引用尚未定义的引用。

我正在使用 Angular 9.1.3

整个 ts 文件。

在此处输入图像描述 任何指导表示赞赏。

0 投票
1 回答
706 浏览

angular - 如何将 ngx-monaco-editor 包装在 ControlValueAccessor 组件中

我正在尝试将ngx-monaco-editor github用于简单的 faas 应用程序,并尝试使其能够在 FormGroup 中使用。

这就是我的组件的样子:

我收到以下错误: 在此处输入图像描述

我正在尝试这样做,以便我可以在附加了 formControlName 的表单中使用 EditorWrapperComponent,但无法弄清楚如何解决这个问题。如果这不是在表单中使用 ngx-monaco-editor 的正确方法,我愿意接受建议。

0 投票
2 回答
218 浏览

angular - 角控件值访问器

我有一个任务是围绕一个组件实现一个包装器,以便它可以无缝地与 Angular 表单一起使用,所以我正在实现ControlValueAccessor接口。底层组件是开源的,偷看它我意识到它也在实现ControlValueAccessor

我的包装器重新实现接口似乎很愚蠢,但我确实需要包装器来设置一些组件默认值。有没有办法ControlValueAccessor在保留包装器的同时避免重新实现?

这是我用来设置默认值的ngx-quill

0 投票
1 回答
82 浏览

ag-grid - 在 ag-Grid 单元格编辑器中使用自定义指令时,在 writeValue() 之前调用焦点事件

目标:使 ag-Grid 单元格可编辑为货币控件。

方法

  1. 为货币创建了一个自定义指令。
  2. 创建了一个自定义单元格编辑器,它使用该货币指令。

问题

在正常情况下,在页面加载时,会加载带有指令(实现 ControlValueAccesor)的控件,并调用 writeValue() 来初始化控件中的值。因此,我使用 writeValue() 显示带有货币 ($) 符号的值。当用户点击控件时,我通过在焦点事件中编写逻辑来显示没有货币符号的值。

现在,使用 ag-Grid,指令不会在页面加载时加载。单击控件时将加载它,因为它包含在单元格编辑器中。因此,在单击/聚焦时,按以下顺序调用以下命令 -

  1. 焦点事件 - 它将控制值设置为空,因为尚未使用 writeValue 设置任何值。但不久之后, writeValue() 被调用。
  2. writeValue() - 它将控制值设置为带有 $ 符号的值,这是我不想要的。我想要没有 $ 符号的价值,在焦点上。

那么,如何在指令的焦点事件之前调用 writeValue() 呢?

注意:顺便说一句,单元格编辑器的 2-click 功能工作正常,但我想要 1-click 解决方案,因为我已将焦点设置在afterGuiAttached().

0 投票
1 回答
293 浏览

angular - 使用 ControlValueAccessors 和 *ngFor 的反应式表单

我需要一些关于如何思考这个问题的帮助..

我有结帐组件,它只是一个表单(public cartForm = new FormGroup({});)并且有使用 ControlValueAccessors 的子组件......所以表单结构变成

地址/成本中心的东西正在工作..但是在文章组件中,我为每个项目都有一个 ngFor ,现在我需要添加一个控件,但这是我卡住的地方......

0 投票
1 回答
3979 浏览

angular - Ng-Select - 使用 ControlValueAccessor 接口选择/取消选择自定义组件中的所有项目

controlValueAccessor我正在尝试使用 ng-select 和界面来包装设置多选(使用每个选项的复选框)组合所需的所有配置。

到目前为止,它有点工作,除了如果我选择通过放置在列表顶部的复选框选择或取消选择所有项目,则仅更新表单中的值,而不是控件中的选择。 在此处输入图像描述

该控件仅在我单独选择或取消选择项目时按预期工作,然后控件和表单值都会相应更新:

在此处输入图像描述

这是可重用组件的代码:

打字稿

HTML

您可以在 stackblitz 上的这个演示中找到整个代码

顺便说一句:我必须在 中添加一个条件onSelectionChange来检查传入的参数是否是一个数组,因为令我惊讶的是,change即使我使用位于列表顶部的复选框,也会调用该事件,而不仅仅是当我选择或取消选择各个选项。

0 投票
1 回答
3643 浏览

angular - 使用 ControlContainer 创建可重用的 matInput 组件时,“无名称的表单控件的值访问器”

我正在按照本指南ControlContainer创建可重复使用的表单,成功创建了可重复使用的表单组,但是当我尝试使用 创建可重复使用的表单元素时matInput,遇到了No value accessor错误。这是my-form-field.ts文件:

这是我使用它的方式:

在此处重新创建示例: https ://stackblitz.com/edit/angular-9-material-reusable-matinput?file=src/app/my-form-field.ts

我的方法可能是错误的,因此对可重用 matInput 表单组件的建议也可以。