Useful or not, from you.
angular Template parse errors: No provider for NgControl when creating custom form elements With Angular Elements

<!--๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…

Oh hi there! ๐Ÿ˜„

To expedite issue processing please search open and closed issues before submitting a new one. Existing issues often contain information about workarounds, resolution, or progress updates.

๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…๐Ÿ”…-->

๐Ÿž bug report

Affected Package

<!-- Can you pin-point one or more @angular/* packages as the source of the bug? --> <!-- โœ๏ธedit: --> The issue is caused by package @angular/element, @angular/forms and @angular/reactiveForms

Description

<!-- โœ๏ธ--> I've being trying to create custom elements with angular elements and for form inputs I've being trying to use angular's ControlValueAccessor for that as discussed in this article by Eliran Eliassy.

But when I follow the guide, and completed the code - I ran into this problem. No provider for NgControl. I have already imported FormsModule and ReactiveFormsModule to app.module.ts file which is the remedy for this error (as normal). But it haven't fixed this time.

The problem seems to be with the Angular Elements where when we create angular element we have to pass the component to entryComponents and that leads to angular compiles it factory even that it's not on the template, and because it's not part of any form and doesn't have any From directive on it -> which gives the error No Provider For NgControl

Later on i have added @Optional() decorator for this. But that leads to ValueAccessor to be null and all other form input actions break.

If i use this without angular elements (as a normal element), that seems to work. I think this is some problem in @angular/elements package. Anyone got a clue?

๐Ÿ”ฌ Minimal Reproduction

<!-- Please create and share minimal reproduction of the issue starting with this template: https://stackblitz.com/fork/angular-issue-repro2 --> <!-- โœ๏ธ--> You can use this StackBlitz to reproduce the error

<!-- If StackBlitz is not suitable for reproduction of your issue, please create a minimal GitHub repository with the reproduction of the issue. A good way to make a minimal reproduction is to create a new app via ng new repro-app and add the minimum possible code to show the problem. Share the link to the repo below along with step-by-step instructions to reproduce the problem, as well as expected and actual behavior.

Issues that don't have enough info and can't be reproduced will be closed.

You can read more about issue submission guidelines here: https://github.com/angular/angular/blob/master/CONTRIBUTING.md#-submitting-an-issue -->

๐Ÿ”ฅ Exception or Error

<pre><code>Error:- Template parse errors: No provider for NgControl</code></pre> And <pre><code>ERROR TypeError: Cannot set property 'valueAccessor' of null Template parse errors: No provider for NgControl</code></pre>

๐ŸŒ Your Environment

Angular Version: <pre><code>Angular 8.2</code></pre>

That's a useful answer
Without any help

Thanks @trotyl and @atscott for the commitment

Fixed the error by adding the ngDefaultControl as a directive in the custom element and implementing the part of the ControlValueAccessor manually.

Here is an example of implementation (Don't mind the validation part, not finished yet) StackBlitz