angular / angular/angular

How to use Angular Elements with Form Control?

未关闭
#48,452 4 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
area: elements area: forms
主要语言
TypeScript
星标
101k
派生
27.5k
平均合并
1 天 19 小时
30 天内合并 PR
288

描述

### Describe the problem that you experienced

Hello,
Since I cannot find any information online about it - I resort to asking straight from the source.

How to convert Angular component that uses Control Value Accessor to Web Component and use it correctly? Is there any official way uncovered in the documentation?

Main issues I have seem to be:
a) Provider array in component with following construct
![image](https://user-images.githubusercontent.com/59230634/207075900-605b2f71-f0a7-4877-b307-7b8972b38683.png)
![image](https://user-images.githubusercontent.com/59230634/207076017-de6d32d3-60e5-453f-9711-6450043940a5.png)
causes this NullInjectorError after conversion to Web Component and simply consuming it in index.html demo file
![image](https://user-images.githubusercontent.com/59230634/207076167-905ab072-3cd1-4a91-b558-1ce311da0fc5.png)
(we can assume here that conversion of other elements - without any items in providers array - are working correctly; this was succesful and relatively easy)

b) Actual consumption of converted element via formControl - I found conflicting information that Web Component can or absolutely cannot be used with Form Control, some info about adding ngDefaultControl directive to Web Component (to every element every time? seems weird but it does nothing for me either way OOTB).

Please, let's settle what is the proper approach here as the documentation seems lacking such information. It would be greatly appreciated by everyone who's trying to convert Angular lib to be widely used across platforms and frameworks.

Cheers!

### Enter the URL of the topic with the problem

https://angular.io/guide/elements#typings-for-custom-elements

### Describe what you were looking for in the documentation

_No response_

### Describe the actions that led you to experience the problem

_No response_

### Describe what you want to experience that would fix the problem

_No response_

### Add a screenshot if that helps illustrate the problem

_No response_

### If this problem caused an exception or error, please paste it here

_No response_

### If the problem is browser-specific, please specify the device, OS, browser, and version

_No response_

### Provide any additional information here in as much as detail as you can

_No response_

贡献指南

打开贡献指南

调研方向

从 angular.io/guide/elements#typings-for-custom-elements 的 Angular Elements 指南开始,查看已报告的 NullInjectorError 和 FormControl 使用问题。确定将基于 ControlValueAccessor 的组件转换为 web components 时官方支持的方法,然后更新文档以说明 provider 和表单控件的行为。

由索引模型根据 Issue 内容生成。

评估

技术栈
angular, typescript
领域
documentation
Issue 类型
文档
难度
5/5
预计耗时
一周以上
活跃度
停滞
描述清晰度
需要澄清
新手友好度
25/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。