Template parse errors: No provider for NgControl when creating custom form elements

Question

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.

StackBlitz Example

What will be the problem? I attached the stackbliz above for your reference.

Answer 1

Found the solution.

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

Please follow these issues for more information.

• ngModelChange not fired and ngModel doesn't work for custom webcomponents (Angular Element
• @angular/elements usage with reactive formControls
• Template parse errors: No provider for NgControl when creating custom form elements With Angular Elements