Type Conversion String to Integer on Ionic 3

Ionic Framework ionic-v3
1

Hello, I am pretty new to ionic and I am working on a project that has a property with a string value within an ionic segment. This ion segment contains two ion-segment buttons, one button’s value is ‘1’ for Yes , and the other button’s value ‘2’ for No. When the user taps the yes button a comment section is enable, if the user taps the no button the comment section is disabled. This property value is binded to the property on a model page using using ngModel. This property value then needs to be converted to a number value when being submitted to a backend in a JSON payload upon submission of the payload. I find that if I just declare this property as a number, it breaks the comment enable/disable functionality and when the value is being submitted it still sends the property as a string value. I am looking for a way to convert the property value from string to number upon submission of the JSON payload.

This is what I currently have:

Property value , declared on model page named formPS4588
public safeWorkPracticesWereDemonstrated: any = ‘0’;

HTML file


Safe Work Practices`



S42 Safe work practices were demonstrated


<ion-segment [(ngModel)]=“form.safeWorkPracticesWereDemonstrated”>
Yes
<ion-segment-button value=“2” (ionSelect)=“tapSafeWorkPracticesNo()”>No



Safe Work Practice Recognition
<ion-textarea autoresize placeholder=“Safe Work Practice Recognition” [disabled]=“disableSafeWorkPractices()”
[(ngModel)]=“form.safeWorkPracticeRecognition”>

TS file
public disableSafeWorkPractices(): boolean {
return (this.form as FormPS4588).safeWorkPracticesWereDemonstrated !== ‘1’;
}

private submitForm(): void {
console.log(‘submitForm()’);
this.form.updateObservationTimeTo();

    let safeWorkPracticesWereDemonstrated = this.formPS4588.safeWorkPracticesWereDemonstrated;

    this.formPS4588.change(safeWorkPracticesWereDemonstrated);

    this.observation.confirmSubmitted();

    this.backendService.postObservation(this.observation, this.form).then((result) => {
        console.log(result);
        
        this.scheduledObservation.confirmSubmitted();
        
        this.loadingCtrl.create({
            content: result,
            duration: 1000
        }).present();
        
        this.exitForm();
    });
}

public change(safeWorkPracticesWereDemonstrated: any): void {
Number(safeWorkPracticesWereDemonstrated);
}

1 Like
2

two ways to go about this:

  1. try binding to a string value of yes or no instead of 0 or 1, and compare strings
  2. using a plus sign ‘+’ to cast some variables as a number:
    +false  // 0
+‘123’  // 123
+0xBABE // 47806 (Hexadecimal)
+null   // 0
+function(val) {return val } // NaN

heres a helpful article

3

I believe I was able to implement a solution by tying a conversion function for the property value when the user taps the submit button for the submission of the form.

<button ion-button block [disabled]="!isObservationCriteriaMet()" (tap)="doSubmit(); change(); >Submit

public change(): void {

    (this.form as FormPS4588).safeWorkPracticesWereDemonstrated = Number((this.form as FormPS4588).safeWorkPracticesWereDemonstrated);
    
}