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 天 20 小時
30 天內合併 PR
299

描述

### 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 摘要。