diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
index 5c5ec9cd2f6..7cd9b931ef9 100644
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -1,5 +1,8 @@
import type { ComponentInterface, EventEmitter } from '@stencil/core';
import { Build, Component, Element, Event, Host, Method, Prop, State, Watch, h } from '@stencil/core';
+import { createLegacyFormController } from '@utils/forms';
+import type { LegacyFormController } from '@utils/forms';
+import { printIonWarning } from '@utils/logging';
import { getIonMode } from '../../global/ionic-global';
import type {
@@ -30,6 +33,12 @@ export class Input implements ComponentInterface {
private inputId = `ion-input-${inputIds++}`;
private inheritedAttributes: Attributes = {};
private isComposing = false;
+
+ private legacyFormController!: LegacyFormController;
+
+ // This flag ensures we log the deprecation warning at most once.
+ private hasLoggedDeprecationWarning = false;
+
/**
* `true` if the input was cleared as a result of the user typing
* with `clearOnEdit` enabled.
@@ -44,7 +53,7 @@ export class Input implements ComponentInterface {
@State() hasFocus = false;
- @Element() el!: HTMLElement;
+ @Element() el!: HTMLIonInputElement;
/**
* The color to use from your application's color palette.
@@ -328,6 +337,10 @@ export class Input implements ComponentInterface {
}
connectedCallback() {
+ const { el } = this;
+
+ this.legacyFormController = createLegacyFormController(el);
+
this.emitStyle();
this.debounceChanged();
if (Build.isBrowser) {
@@ -408,14 +421,16 @@ export class Input implements ComponentInterface {
}
private emitStyle() {
- this.ionStyle.emit({
- interactive: true,
- input: true,
- 'has-placeholder': this.placeholder !== undefined,
- 'has-value': this.hasValue(),
- 'has-focus': this.hasFocus,
- 'interactive-disabled': this.disabled,
- });
+ if (this.legacyFormController.hasLegacyControl()) {
+ this.ionStyle.emit({
+ interactive: true,
+ input: true,
+ 'has-placeholder': this.placeholder !== undefined,
+ 'has-value': this.hasValue(),
+ 'has-focus': this.hasFocus,
+ 'interactive-disabled': this.disabled,
+ });
+ }
}
private onInput = (ev: InputEvent | Event) => {
@@ -497,7 +512,21 @@ export class Input implements ComponentInterface {
return this.getValue().length > 0;
}
- render() {
+ private renderInput() {
+ return