bug: Angular Web Components Accessing formControlName

[codercatdev]

Bug Report

Ionic version:
[x] 4.9.0

Current behavior:
Possibly related to #6938.
When using Angular Webcomponents with Ionic core I cannot use formControlName on ion-input. It will only work with a regular input element.

Error: No value accessor for form control with name: 'displayName'

Expected behavior:
Pass the attributes forward (if possible) to the underlying input element that is produced within the slot of ion-input.

Steps to reproduce:

Use stackblitz as a good example.

Related code:

Working example
https://stackblitz.com/edit/ionic-core-angular-webcomponent-working

Not working
https://stackblitz.com/edit/ionic-core-angular-webcomponent-not-working

Ionic info:

[DavidStrausz]

Try adding the ngDefaultControl attribute to the element.

[liamdebeasi]

Thanks for the issue. I noticed you have @ionic/core as a dependency, but you also are manually including a version of @ionic/core in index.html. Does it work if you have @ionic/angular as a dependency instead of just @ionic/core?

[codercatdev]

I have added ngDefaultControl to the element still failing. I removed @ionic/core from dependencies as this really wasn't doing anything. I would rather leave this as manually adding as the web component is supposed to be usable inside of an Ionic Core app, not the angular version.

In this case we are just using index.html as if it were another site completely, to test the web components.

I also removed @ionic/core from the working version just to verify...and it still does work.

Hope that helps.

[liamdebeasi]

Thanks for the issue. Is this still an issue with the latest version of Ionic Framework? If, so can you please try to reproduce this inside of an Ionic Framework starter application? I noticed that your original examples are not correctly installing Ionic Framework, which may be the cause of the issue.

[ionitron-bot]

Thanks for the issue! This issue is being closed due to the lack of a reply. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!