feat(textarea): reflect disabled and readonly props (#30910)

Co-authored-by: Maria Hutt <maria.hutt@outsystems.com>

packages/angular/test/base/e2e/src/lazy/inputs.spec.ts

@@ -5,105 +5,126 @@ test.describe('Inputs', () => {
     await page.goto('/lazy/inputs');
   });
 
-  test('should have default values', async ({ page }) => {
-    // Check primary elements for default values
-    await expect(page.locator('ion-checkbox').first()).toHaveJSProperty('checked', true);
-    await expect(page.locator('ion-radio-group').first()).toHaveJSProperty('value', 'nes');
-    await expect(page.locator('ion-toggle').first()).toHaveJSProperty('checked', true);
-    await expect(page.locator('ion-input').first()).toHaveJSProperty('value', 'some text');
-    await expect(page.locator('ion-input-otp').first()).toHaveJSProperty('value', '1234');
-    await expect(page.locator('ion-datetime').first()).toHaveJSProperty('value', '1994-03-15');
-    await expect(page.locator('ion-select').first()).toHaveJSProperty('value', 'nes');
-    await expect(page.locator('ion-range').first()).toHaveJSProperty('value', 50);
-  });
+  test.describe('basic functionality', () => {
+    test('should have default values', async ({ page }) => {
+      // Check primary elements for default values
+      await expect(page.locator('ion-checkbox').first()).toHaveJSProperty('checked', true);
+      await expect(page.locator('ion-radio-group').first()).toHaveJSProperty('value', 'nes');
+      await expect(page.locator('ion-toggle').first()).toHaveJSProperty('checked', true);
+      await expect(page.locator('ion-input').first()).toHaveJSProperty('value', 'some text');
+      await expect(page.locator('ion-input-otp').first()).toHaveJSProperty('value', '1234');
+      await expect(page.locator('ion-datetime').first()).toHaveJSProperty('value', '1994-03-15');
+      await expect(page.locator('ion-select').first()).toHaveJSProperty('value', 'nes');
+      await expect(page.locator('ion-range').first()).toHaveJSProperty('value', 50);
+    });
 
-  test('should reset values', async ({ page }) => {
-    await page.locator('#reset-button').click();
+    test('should reset values', async ({ page }) => {
+      await page.locator('#reset-button').click();
 
-    // Check primary elements after reset
-    await expect(page.locator('ion-checkbox').first()).toHaveJSProperty('checked', false);
-    await expect(page.locator('ion-radio-group').first()).toHaveJSProperty('value', undefined);
-    await expect(page.locator('ion-toggle').first()).toHaveJSProperty('checked', false);
-    /**
-     * The `value` property gets set to undefined
-     * for these components, so we need to check
-     * that the value property is undefined.
-     */
-    await expect(page.locator('ion-input').first()).toHaveJSProperty('value', undefined);
-    await expect(page.locator('ion-input-otp').first()).toHaveJSProperty('value', undefined);
-    await expect(page.locator('ion-datetime').first()).toHaveJSProperty('value', undefined);
-    await expect(page.locator('ion-select').first()).toHaveJSProperty('value', undefined);
-    await expect(page.locator('ion-range').first()).toHaveJSProperty('value', undefined);
-  });
+      // Check primary elements after reset
+      await expect(page.locator('ion-checkbox').first()).toHaveJSProperty('checked', false);
+      await expect(page.locator('ion-radio-group').first()).toHaveJSProperty('value', undefined);
+      await expect(page.locator('ion-toggle').first()).toHaveJSProperty('checked', false);
+      /**
+       * The `value` property gets set to undefined
+       * for these components, so we need to check
+       * that the value property is undefined.
+       */
+      await expect(page.locator('ion-input').first()).toHaveJSProperty('value', undefined);
+      await expect(page.locator('ion-input-otp').first()).toHaveJSProperty('value', undefined);
+      await expect(page.locator('ion-datetime').first()).toHaveJSProperty('value', undefined);
+      await expect(page.locator('ion-select').first()).toHaveJSProperty('value', undefined);
+      await expect(page.locator('ion-range').first()).toHaveJSProperty('value', undefined);
+    });
 
-  test('should set values', async ({ page }) => {
-    await page.locator('#reset-button').click();
-    await page.locator('#set-button').click();
+    test('should set values', async ({ page }) => {
+      await page.locator('#reset-button').click();
+      await page.locator('#set-button').click();
 
-    // Check primary elements after setting values
-    await expect(page.locator('ion-checkbox').first()).toHaveJSProperty('checked', true);
-    await expect(page.locator('ion-radio-group').first()).toHaveJSProperty('value', 'nes');
-    await expect(page.locator('ion-toggle').first()).toHaveJSProperty('checked', true);
-    await expect(page.locator('ion-input').first()).toHaveJSProperty('value', 'some text');
-    await expect(page.locator('ion-input-otp').first()).toHaveJSProperty('value', '1234');
-    await expect(page.locator('ion-datetime').first()).toHaveJSProperty('value', '1994-03-15');
-    await expect(page.locator('ion-select').first()).toHaveJSProperty('value', 'nes');
-    await expect(page.locator('ion-range').first()).toHaveJSProperty('value', 50);
-  });
+      // Check primary elements after setting values
+      await expect(page.locator('ion-checkbox').first()).toHaveJSProperty('checked', true);
+      await expect(page.locator('ion-radio-group').first()).toHaveJSProperty('value', 'nes');
+      await expect(page.locator('ion-toggle').first()).toHaveJSProperty('checked', true);
+      await expect(page.locator('ion-input').first()).toHaveJSProperty('value', 'some text');
+      await expect(page.locator('ion-input-otp').first()).toHaveJSProperty('value', '1234');
+      await expect(page.locator('ion-datetime').first()).toHaveJSProperty('value', '1994-03-15');
+      await expect(page.locator('ion-select').first()).toHaveJSProperty('value', 'nes');
+      await expect(page.locator('ion-range').first()).toHaveJSProperty('value', 50);
+    });
 
-  test('should update angular when values change', async ({ page }) => {
-    await page.locator('#reset-button').click();
+    test('should update angular when values change', async ({ page }) => {
+      await page.locator('#reset-button').click();
 
-    await page.locator('ion-checkbox#first-checkbox').click();
-    await page.locator('ion-radio').first().click();
-    await page.locator('ion-toggle').first().click();
+      await page.locator('ion-checkbox#first-checkbox').click();
+      await page.locator('ion-radio').first().click();
+      await page.locator('ion-toggle').first().click();
 
-    await page.locator('ion-input').nth(0).locator('input').fill('hola');
-    await page.locator('ion-input').nth(0).locator('input').blur();
+      await page.locator('ion-input').nth(0).locator('input').fill('hola');
+      await page.locator('ion-input').nth(0).locator('input').blur();
 
-    await page.locator('ion-input-otp input').nth(0).fill('1');
-    await page.locator('ion-input-otp input').nth(1).fill('2');
-    await page.locator('ion-input-otp input').nth(2).fill('3');
-    await page.locator('ion-input-otp input').nth(3).fill('4');
-    await page.locator('ion-input-otp input').nth(3).blur();
+      await page.locator('ion-input-otp input').nth(0).fill('1');
+      await page.locator('ion-input-otp input').nth(1).fill('2');
+      await page.locator('ion-input-otp input').nth(2).fill('3');
+      await page.locator('ion-input-otp input').nth(3).fill('4');
+      await page.locator('ion-input-otp input').nth(3).blur();
 
-    // Set date to 1994-03-14
-    await page.locator('ion-datetime').first().click();
-    await page.locator('ion-datetime').first().locator('.calendar-day:not([disabled])').first().click();
+      // Set date to 1994-03-14
+      await page.locator('ion-datetime').first().click();
+      await page.locator('ion-datetime').first().locator('.calendar-day:not([disabled])').first().click();
 
-    await page.locator('ion-select#game-console').click();
-    await expect(page.locator('ion-alert')).toBeVisible();
-    // Playstation option
-    await page.locator('ion-alert .alert-radio-button').nth(3).click();
-    // Click confirm button
-    await page.locator('ion-alert .alert-button:not(.alert-button-role-cancel)').click();
+      await page.locator('ion-select#game-console').click();
+      await expect(page.locator('ion-alert')).toBeVisible();
+      // Playstation option
+      await page.locator('ion-alert .alert-radio-button').nth(3).click();
+      // Click confirm button
+      await page.locator('ion-alert .alert-button:not(.alert-button-role-cancel)').click();
 
-    // Check note text (Angular binding updates)
-    await expect(page.locator('#checkbox-note')).toHaveText('true');
-    await expect(page.locator('#radio-note')).toHaveText('nes');
-    await expect(page.locator('#toggle-note')).toHaveText('true');
-    await expect(page.locator('#input-note')).toHaveText('hola');
-    await expect(page.locator('#input-otp-note')).toHaveText('1234');
-    await expect(page.locator('#datetime-note')).toHaveText('1994-03-14');
-    await expect(page.locator('#select-note')).toHaveText('ps');
-  });
+      // Check note text (Angular binding updates)
+      await expect(page.locator('#checkbox-note')).toHaveText('true');
+      await expect(page.locator('#radio-note')).toHaveText('nes');
+      await expect(page.locator('#toggle-note')).toHaveText('true');
+      await expect(page.locator('#input-note')).toHaveText('hola');
+      await expect(page.locator('#input-otp-note')).toHaveText('1234');
+      await expect(page.locator('#datetime-note')).toHaveText('1994-03-14');
+      await expect(page.locator('#select-note')).toHaveText('ps');
+    });
 
-  test('should update values when erasing input', async ({ page }) => {
-    // Focus the input and press backspace to remove last character
-    await page.locator('ion-input').nth(0).locator('input').click();
-    await page.locator('ion-input').nth(0).locator('input').press('Backspace');
-    // Check mirror element reflects the change
-    await expect(page.locator('ion-input').nth(1)).toHaveJSProperty('value', 'some tex');
-    // Check note text (Angular binding)
-    await expect(page.locator('#input-note')).toHaveText('some tex');
+    test('should update values when erasing input', async ({ page }) => {
+      // Focus the input and press backspace to remove last character
+      await page.locator('ion-input').nth(0).locator('input').click();
+      await page.locator('ion-input').nth(0).locator('input').press('Backspace');
+      // Check mirror element reflects the change
+      await expect(page.locator('ion-input').nth(1)).toHaveJSProperty('value', 'some tex');
+      // Check note text (Angular binding)
+      await expect(page.locator('#input-note')).toHaveText('some tex');
 
-    // Focus the last OTP input and press backspace
-    await page.locator('ion-input-otp input').last().click();
-    await page.locator('ion-input-otp input').last().press('Backspace');
-    // Check mirror element reflects the change
-    await expect(page.locator('ion-input-otp').nth(1)).toHaveJSProperty('value', '123');
-    // Check note text (Angular binding)
-    await expect(page.locator('#input-otp-note')).toHaveText('123');
+      // Focus the last OTP input and press backspace
+      await page.locator('ion-input-otp input').last().click();
+      await page.locator('ion-input-otp input').last().press('Backspace');
+      // Check mirror element reflects the change
+      await expect(page.locator('ion-input-otp').nth(1)).toHaveJSProperty('value', '123');
+      // Check note text (Angular binding)
+      await expect(page.locator('#input-otp-note')).toHaveText('123');
+    });
+
+    test('should reflect props when component has a default value', async ({ page }) => {
+      // Disable inputs
+      await page.locator('#disable-button').click();
+
+      // Disabled prop
+      await expect(page.locator('ion-input').first()).toHaveAttribute('disabled', '');
+      await expect(page.locator('ion-input-otp').first()).toHaveAttribute('disabled', '');
+      await expect(page.locator('ion-textarea').first()).toHaveAttribute('disabled', '');
+
+      // Reset disabled state and set readonly state
+      await page.locator('#disable-button').click();
+      await page.locator('#readonly-button').click();
+
+      // Readonly prop
+      await expect(page.locator('ion-input').first()).toHaveAttribute('readonly', '');
+      await expect(page.locator('ion-input-otp').first()).toHaveAttribute('readonly', '');
+      await expect(page.locator('ion-textarea').first()).toHaveAttribute('readonly', '');
+    });
   });
 
   test.describe('updating text input refs', () => {

packages/angular/test/base/e2e/src/standalone/inputs.spec.ts

@@ -0,0 +1,28 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Inputs', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/standalone/inputs');
+  });
+
+  test.describe('basic functionality', () => {
+    test('should reflect props when component has a default value', async ({ page }) => {
+      // Disable inputs
+      await page.locator('#disable-button').click();
+
+      // Disabled prop
+      await expect(page.locator('ion-input')).toHaveAttribute('disabled', '');
+      await expect(page.locator('ion-input-otp')).toHaveAttribute('disabled', '');
+      await expect(page.locator('ion-textarea')).toHaveAttribute('disabled', '');
+
+      // Reset disabled state and set readonly state
+      await page.locator('#disable-button').click();
+      await page.locator('#readonly-button').click();
+
+      // Readonly prop
+      await expect(page.locator('ion-input')).toHaveAttribute('readonly', '');
+      await expect(page.locator('ion-input-otp')).toHaveAttribute('readonly', '');
+      await expect(page.locator('ion-textarea')).toHaveAttribute('readonly', '');
+    });
+  });
+});

packages/angular/test/base/src/app/lazy/inputs/inputs.component.html

@@ -11,18 +11,18 @@
 
     <ion-item>
       <ion-label>DateTime</ion-label>
-      <ion-datetime [(ngModel)]="datetime" min="1994-03-14" max="2017-12-09" display-format="MM/DD/YYYY"></ion-datetime>
+      <ion-datetime [(ngModel)]="datetime" min="1994-03-14" max="2017-12-09" display-format="MM/DD/YYYY" [disabled]="isDisabled" [readonly]="isReadonly"></ion-datetime>
       <ion-note slot="end" id="datetime-note">{{datetime}}</ion-note>
     </ion-item>
 
     <ion-item color="dark">
       <ion-label>DateTime Mirror</ion-label>
-      <ion-datetime [(ngModel)]="datetime" min="1994-03-14" max="2017-12-09" display-format="MM/DD/YYYY"></ion-datetime>
+      <ion-datetime [(ngModel)]="datetime" min="1994-03-14" max="2017-12-09" display-format="MM/DD/YYYY" [disabled]="isDisabled" [readonly]="isReadonly"></ion-datetime>
       <ion-note slot="end">{{datetime}}</ion-note>
     </ion-item>
 
     <ion-item>
-      <ion-select label="Select" [(ngModel)]="select" id="game-console">
+      <ion-select label="Select" [(ngModel)]="select" id="game-console" [disabled]="isDisabled">
         <ion-select-option value="">No Game Console</ion-select-option>
         <ion-select-option value="nes">NES</ion-select-option>
         <ion-select-option value="n64" selected>Nintendo64</ion-select-option>
@@ -48,7 +48,7 @@
     </ion-item>
 
     <ion-item>
-      <ion-toggle [(ngModel)]="toggle" slot="end">
+      <ion-toggle [(ngModel)]="toggle" slot="end" [disabled]="isDisabled">
         Toggle
       </ion-toggle>
       <ion-note slot="end" id="toggle-note">{{toggle}}</ion-note>
@@ -62,27 +62,27 @@
     </ion-item>
 
     <ion-item>
-      <ion-input label="Input" [(ngModel)]="input"></ion-input>
+      <ion-input label="Input" [(ngModel)]="input" [disabled]="isDisabled" [readonly]="isReadonly"></ion-input>
       <ion-note slot="end" id="input-note">{{input}}</ion-note>
     </ion-item>
 
     <ion-item color="dark">
-      <ion-input label="Input Mirror" [(ngModel)]="input"></ion-input>
+      <ion-input label="Input Mirror" [(ngModel)]="input" [disabled]="isDisabled" [readonly]="isReadonly"></ion-input>
       <ion-note slot="end">{{input}}</ion-note>
     </ion-item>
 
     <ion-item>
-      <ion-input-otp [(ngModel)]="inputOtp">Input OTP</ion-input-otp>
+      <ion-input-otp [(ngModel)]="inputOtp" [disabled]="isDisabled" [readonly]="isReadonly">Input OTP</ion-input-otp>
       <ion-note slot="end" id="input-otp-note">{{inputOtp}}</ion-note>
     </ion-item>
 
     <ion-item color="dark">
-      <ion-input-otp [(ngModel)]="inputOtp">Input OTP Mirror</ion-input-otp>
+      <ion-input-otp [(ngModel)]="inputOtp" [disabled]="isDisabled" [readonly]="isReadonly">Input OTP Mirror</ion-input-otp>
       <ion-note slot="end">{{inputOtp}}</ion-note>
     </ion-item>
 
     <ion-item>
-      <ion-checkbox [(ngModel)]="checkbox" slot="start" id="first-checkbox">
+      <ion-checkbox [(ngModel)]="checkbox" slot="start" id="first-checkbox" [disabled]="isDisabled">
         Checkbox
       </ion-checkbox>
       <ion-note slot="end" id="checkbox-note">{{checkbox}}</ion-note>
@@ -97,7 +97,7 @@
 
     <ion-item>
       <ion-radio-group value="nes" [(ngModel)]="radio" id="first-radio">
-        <ion-radio value="nes">Radio</ion-radio>
+        <ion-radio value="nes" [disabled]="isDisabled">Radio</ion-radio>
       </ion-radio-group>
       <ion-note slot="end" id="radio-note">{{radio}}</ion-note>
     </ion-item>
@@ -110,14 +110,20 @@
     </ion-item>
 
     <ion-item>
-      <ion-range [(ngModel)]="range" min="0" max="100" id="first-range">
+      <ion-range [(ngModel)]="range" min="0" max="100" id="first-range" [disabled]="isDisabled">
         <ion-label slot="start">Range</ion-label>
       </ion-range>
     </ion-item>
 
+    <ion-item>
+      <ion-textarea [(ngModel)]="textarea" minLength="0" maxLength="100" [disabled]="isDisabled" [readonly]="isReadonly" label="Textarea"></ion-textarea>
+    </ion-item>
+
   </ion-list>
   <p>
     <ion-button (click)="setValues()" id="set-button">Set values</ion-button>
     <ion-button (click)="resetValues()" id="reset-button">Reset values</ion-button>
+    <ion-button (click)="toggleDisable()" id="disable-button">Toggle Disabled</ion-button>
+    <ion-button (click)="toggleReadonly()" id="readonly-button">Toggle Readonly</ion-button>
   </p>
 </ion-content>

packages/angular/test/base/src/app/lazy/inputs/inputs.component.ts

@@ -16,6 +16,11 @@ export class InputsComponent {
   select? = 'nes';
   changes = 0;
   range? = 50;
+  textarea? = 'some text';
+
+  // States
+  isDisabled = false;
+  isReadonly = false;
 
   setValues() {
     console.log('set values');
@@ -27,6 +32,7 @@ export class InputsComponent {
     this.toggle = true;
     this.select = 'nes';
     this.range = 50;
+    this.textarea = 'some text';
   }
 
   resetValues() {
@@ -39,6 +45,17 @@ export class InputsComponent {
     this.toggle = false;
     this.select = undefined;
     this.range = undefined;
+    this.textarea = undefined;
+  }
+
+  toggleDisable() {
+    console.log(`toggle disable to ${!this.isDisabled}`);
+    this.isDisabled = !this.isDisabled;
+  }
+
+  toggleReadonly() {
+    console.log(`toggle readonly to ${!this.isReadonly}`);
+    this.isReadonly = !this.isReadonly;
   }
 
   counter() {

packages/angular/test/base/src/app/standalone/app-standalone/app.routes.ts

@@ -7,6 +7,7 @@ export const routes: Routes = [
     component: AppComponent,
     children: [
       { path: '', loadComponent: () => import('../home-page/home-page.component').then(c => c.HomePageComponent) },
+      { path: 'inputs', loadComponent: () => import('../inputs/inputs.component').then(c => c.InputsComponent) },
       { path: 'menu-controller', loadComponent: () => import('../menu-controller/menu-controller.component').then(c => c.MenuControllerComponent) },
       { path: 'action-sheet-controller', loadComponent: () => import('../action-sheet-controller/action-sheet-controller.component').then(c => c.ActionSheetControllerComponent) },
       { path: 'popover', loadComponent: () => import('../popover/popover.component').then(c => c.PopoverComponent) },

packages/angular/test/base/src/app/standalone/home-page/home-page.component.html

@@ -28,6 +28,11 @@
         Icon Test
       </ion-label>
     </ion-item>
+    <ion-item routerLink="/standalone/inputs">
+      <ion-label>
+        Inputs Test
+      </ion-label>
+    </ion-item>
     <ion-item routerLink="/standalone/reorder-group">
       <ion-label>
         Reorder Group Test

packages/angular/test/base/src/app/standalone/inputs/inputs.component.html

@@ -0,0 +1,79 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>
+      Inputs test
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content>
+  <form [formGroup]="form">
+    <ion-list>
+      <ion-item>
+        <ion-label>DateTime</ion-label>
+        <ion-datetime formControlName="datetime" min="1994-03-14" max="2017-12-09" display-format="MM/DD/YYYY" [disabled]="isDisabled" [readonly]="isReadonly"></ion-datetime>
+        <ion-note slot="end" id="datetime-note">{{form.value.datetime}}</ion-note>
+      </ion-item>
+
+      <ion-item>
+        <ion-select label="Select" formControlName="select" id="game-console" [disabled]="isDisabled">
+          <ion-select-option value="">No Game Console</ion-select-option>
+          <ion-select-option value="nes">NES</ion-select-option>
+          <ion-select-option value="n64" selected>Nintendo64</ion-select-option>
+          <ion-select-option value="ps">PlayStation</ion-select-option>
+          <ion-select-option value="genesis">Sega Genesis</ion-select-option>
+          <ion-select-option value="saturn">Sega Saturn</ion-select-option>
+          <ion-select-option value="snes">SNES</ion-select-option>
+        </ion-select>
+        <ion-note slot="end" id="select-note">{{form.value.select}}</ion-note>
+      </ion-item>
+
+      <ion-item>
+        <ion-toggle formControlName="toggle" slot="end" [disabled]="isDisabled">
+          Toggle
+        </ion-toggle>
+        <ion-note slot="end" id="toggle-note">{{form.value.toggle}}</ion-note>
+      </ion-item>
+
+      <ion-item>
+        <ion-input label="Input" formControlName="input" [disabled]="isDisabled" [readonly]="isReadonly"></ion-input>
+        <ion-note slot="end" id="input-note">{{form.value.input}}</ion-note>
+      </ion-item>
+
+      <ion-item>
+        <ion-input-otp formControlName="inputOtp" [disabled]="isDisabled" [readonly]="isReadonly">Input OTP</ion-input-otp>
+        <ion-note slot="end" id="input-otp-note">{{form.value.inputOtp}}</ion-note>
+      </ion-item>
+
+      <ion-item>
+        <ion-checkbox formControlName="checkbox" slot="start" id="first-checkbox" [disabled]="isDisabled">
+          Checkbox
+        </ion-checkbox>
+        <ion-note slot="end" id="checkbox-note">{{form.value.checkbox}}</ion-note>
+      </ion-item>
+
+      <ion-item>
+        <ion-radio-group value="nes" formControlName="radio" id="first-radio">
+          <ion-radio value="nes" [disabled]="isDisabled">Radio</ion-radio>
+        </ion-radio-group>
+        <ion-note slot="end" id="radio-note">{{form.value.radio}}</ion-note>
+      </ion-item>
+
+      <ion-item>
+        <ion-range formControlName="range" min="0" max="100" id="first-range" [disabled]="isDisabled">
+          <ion-label slot="start">Range</ion-label>
+        </ion-range>
+      </ion-item>
+
+      <ion-item>
+        <ion-textarea formControlName="textarea" minLength="0" maxLength="100" [disabled]="isDisabled" [readonly]="isReadonly" label="Textarea"></ion-textarea>
+      </ion-item>
+
+    </ion-list>
+  </form>
+  <p>
+    <ion-button (click)="setValues()" id="set-button">Set values</ion-button>
+    <ion-button (click)="resetValues()" id="reset-button">Reset values</ion-button>
+    <ion-button (click)="toggleDisable()" id="disable-button">Toggle Disabled</ion-button>
+    <ion-button (click)="toggleReadonly()" id="readonly-button">Toggle Readonly</ion-button>
+  </p>
+</ion-content>

packages/angular/test/base/src/app/standalone/inputs/inputs.component.ts

@@ -0,0 +1,80 @@
+import { Component } from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { 
+  IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, 
+  IonLabel, IonDatetime, IonNote, IonSelect, IonSelectOption, 
+  IonToggle, IonInput, IonInputOtp, IonCheckbox, IonRadioGroup, 
+  IonRadio, IonRange, IonTextarea, IonButton 
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-inputs',
+  templateUrl: './inputs.component.html',
+  standalone: true,
+  imports: [
+    ReactiveFormsModule,
+    IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, 
+    IonLabel, IonDatetime, IonNote, IonSelect, IonSelectOption, 
+    IonToggle, IonInput, IonInputOtp, IonCheckbox, IonRadioGroup, 
+    IonRadio, IonRange, IonTextarea, IonButton
+  ],
+})
+export class InputsComponent {
+  // Create the FormGroup
+  form = new FormGroup({
+    datetime: new FormControl('1994-03-15'),
+    input: new FormControl('some text'),
+    inputOtp: new FormControl('1234'),
+    checkbox: new FormControl(true),
+    radio: new FormControl('nes'),
+    toggle: new FormControl(true),
+    select: new FormControl('nes'),
+    range: new FormControl(50),
+    textarea: new FormControl('some text'),
+  });
+
+  // States
+  isDisabled = false;
+  isReadonly = false;
+
+  setValues() {
+    console.log('set values');
+    this.form.patchValue({
+      datetime: '1994-03-15',
+      input: 'some text',
+      inputOtp: '1234',
+      checkbox: true,
+      radio: 'nes',
+      toggle: true,
+      select: 'nes',
+      range: 50,
+      textarea: 'some text',
+    });
+  }
+
+  resetValues() {
+    console.log('reset values');
+    // reset them each
+    this.form.patchValue({
+      datetime: undefined,
+      input: undefined,
+      inputOtp: undefined,
+      checkbox: false,
+      radio: undefined,
+      toggle: false,
+      select: undefined,
+      range: undefined,
+      textarea: undefined,
+    });
+  }
+
+  toggleDisable() {
+    console.log(`toggle disable to ${!this.isDisabled}`);
+    this.isDisabled = !this.isDisabled;
+  }
+
+  toggleReadonly() {
+    console.log(`toggle readonly to ${!this.isReadonly}`);
+    this.isReadonly = !this.isReadonly;
+  }
+}