Closed
Description
Bug Report
Ionic version:
[x] 4.7.x
Current behavior:
Ionic input control not working and refreshing UI as expected
Expected behavior:
Prevent write value on disabled ion-input control and Change detection should refresh the UI
Related code:
<!-- Anticipo a rentas incluido -->
<ion-col size-xs="12" size-lg="4">
<ion-item mode="md" class="item-form-group switch">
<ion-label (click)="anticipoARentasIncluido.setValue(!anticipoARentasIncluido.value)">
Anticipo a rentas incluido
</ion-label>
<ion-toggle formControlName="AnticipoARentasIncluido" (ionChange)="handleAnticipoRentasIncluido($event)"></ion-toggle>
</ion-item>
</ion-col>
<!-- Anticipo a rentas con IVA -->
<ion-col size-xs="12" size-lg="4">
<ion-item mode="md" class="item-form-group" [disabled]="anticipoARentasIncluido.value != true">
<ion-label position="stacked">Anticipo a rentas con IVA</ion-label>
<ion-input #inputAnticipoRentas type="text" inputmode="numeric" maxlength="13"
formControlName="AnticipoARentas" (ionChange)="handleCommissionsPercent($event)"
[brmasker]="{money: true, thousand: ',', decimalCaracter: '.', decimal: '2'}">
<ion-icon name="logo-usd" slot="start" class="money-icon"></ion-icon>
</ion-input>
</ion-item>
<div class="error-container" *ngIf="anticipoARentas.touched == true && anticipoARentas.errors">
<div class="error-message" *ngIf="anticipoARentas.errors['required']">
<ion-icon name="information-circle-outline" aria-label="invalid input"></ion-icon>
<span>Campo obligatorio</span>
</div>
</div>
</ion-col>
handleAnticipoRentasIncluido(event: CustomEvent) {
const value = event.detail['checked'];
if (value == true) {
this.anticipoARentas.setValidators([Validators.required]);
this.anticipoARentas.updateValueAndValidity();
this.changeDetectorRef.detectChanges();
this.anticipoARentas.markAsTouched();
} else {
this.anticipoARentas.clearValidators();
this.anticipoARentas.updateValueAndValidity();
this.changeDetectorRef.detectChanges();
}
}
Ionic info:
Ionic:
Ionic CLI : 5.1.0 (/usr/local/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.7.4
@angular-devkit/build-angular : 0.13.0
@angular-devkit/schematics : 7.2.3
@angular/cli : 7.3.1
@ionic/angular-toolkit : 1.4.0
Cordova:
Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : android 8.0.0, ios 5.0.1
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.1, (and 13 other plugins)
Utility:
cordova-res : not installed
native-run : 0.2.7 (update available: 0.2.8)
System:
ios-deploy : 1.9.4
ios-sim : 8.0.1
NodeJS : v10.16.0 (/usr/local/bin/node)
npm : 6.9.0
OS : macOS Mojave
Xcode : Xcode 10.2.1 Build version 10E1001