Ion-input number variable dirty checking

Ionic Framework
1

Hi,
I am facing a strange problem and I am kinda new to Ionic.
I am using Ionic 4 with Angular 7 with the form template, and the information of the system as follows:

Ionic:
Ionic CLI : 5.1.0
Ionic Framework : @ionic/angular 4.6.0
@angular-devkit/build-angular : 0.13.9
@angular-devkit/schematics : 7.3.9
@angular/cli : 7.3.9
@ionic/angular-toolkit : 1.5.1

Utility:
cordova-res : 0.5.1
native-run : 0.2.7

System:
NodeJS : v10.16.0
npm : 6.9.0
OS : Windows 10

The problem is that after loading the data from the server and assign to a local object, the form control for the number variable becomes dirty but the control for the string variable is not. The correct behaviour is not to mark any control as dirty unless it changed from the form.

HTML File:

model.settings.smtpServerUrl model.settings.smtpServerPort
test

Script File
export class SettingsPage implements OnInit, OnDestroy, CanComponentDeactivate {
@ViewChild(‘f’) ngForm: NgForm;
ref = new References();

ngOnInit() {
this.loadData();
}

loadData() {
const url = ‘url goes here’;
this.httpClient.get(url).subscribe(
data => {
this.ref = data;
},
response => {
console.log(response);
}
);
});
}
}

Am I missing anything?

Thanks,

2

I figured out what is the problem. ion-input control treats the value internally as a string regardless of the input variable type, so when the input control compares the new input value (number in this case) with the stored value (string), the comparison fails.
This is where the stored value in the control

export class Input implements ComponentInterface {
…
/**

  • The value of the input.
    */
    @Prop({ mutable: true }) value?: string | null = ‘’;
    …
    }

The comparison takes place inside the value accessor

export class ValueAccessor implements ControlValueAccessor {
…
handleChangeEvent(value: any) {
// ------- my comment ------------
// this line will give false in case of comparing string to number, “value” will be string and “this.lastValue” will be number
// ------- my comment ------------
if (value !== this.lastValue) {
this.lastValue = value;
this.onChange(value);
}
setIonicClasses(this.el);
}
…
}

To overcome this problem I have to change the variable type after loading to a string.

3

Hi, I got the same problem with numeric ion-inputs. (also Ionic CLI : 5.1.0)

Just give a more concrete solution for any future readers:

The workaround I use is:

Instead of:

 <ion-input name="age" type="number" [(ngModel)]="item.age">  </ion-input>

Use:

 <ion-input name="age" type="number" [ngModel]="convertToString(item.age)"  (ionChange)="item.age = convertToNumber($event)">  </ion-input>

And in controller:

 // Todo: workaround currently needed because numeric <ion-input> sets form model dirty
  public convertToNumber(event: any): number {
    return +(event.detail.value);
   }
   public convertToString(value: number): string {
    return value.toString();
   }