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

Co-authored-by: Maria Hutt <maria.hutt@outsystems.com>
2026-03-13 10:22:08 +08:00 · 2026-02-11 01:24:39 +01:00
parent 46806bd6e2
commit 55735df3fa
14 changed files with 520 additions and 194 deletions
--- a/packages/angular/test/base/src/app/lazy/inputs/inputs.component.html
+++ b/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>
--- a/packages/angular/test/base/src/app/lazy/inputs/inputs.component.ts
+++ b/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() {
--- a/packages/angular/test/base/src/app/standalone/app-standalone/app.routes.ts
+++ b/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) },
--- a/packages/angular/test/base/src/app/standalone/home-page/home-page.component.html
+++ b/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
--- a/packages/angular/test/base/src/app/standalone/inputs/inputs.component.html
+++ b/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>
--- a/packages/angular/test/base/src/app/standalone/inputs/inputs.component.ts
+++ b/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;
+  }
+}