Update value of ion-input

Ionic Framework ionic-v3
1

Hello,
I would like to update the value of ion-input. I tried out multiple examples:

bind value
ion-input [value]=“control.input.value” type=“text”
–> update in class with ( (this.control)).updateValue(‘dummy’);

bind with model
ion-input [(ngModel)]=“inputField” type=“text”
–> update in class with this.inputField = ‘dummy’;

All this works in desktop browser, but unfortunatly on Android it fails. Thank you for your advices :slightly_smiling:

2

Any console error from Android?

3

Hi! Can you attach a debugger through chrome and see if there are any errors?

4

Hello,
thank you for your replies. Unfortunately, there are no errors. I can see that something changes but within milliseconds it changes to the old value.
I don`t want to share the public development URL in public but if it helps, I can share it to you via PM. Nevertheless, I will share here some code snippets for a better understanding:
My View:

<ion-item>
  <ion-label floating>Device-ID (UUID-v4)</ion-label>
  <ion-input (keyup)="onKeyUp($event)" [value]="token.value" [ngFormControl]="token" type="text"></ion-input>
</ion-item>

Page events:

constructor(...) {
    this.authForm = fb.group({
            'token' : [defaultTokenValue, Validators.compose([Validators.required, ThisPage.tokenValidator])]
        });
        this.token = <Control> this.authForm.find('token');
}

onKeyUp(event) : void {
    let oldValue = this.token.value;
    let value = event.target.value.toUpperCase();
    // check if needs to add or replace a seperator (-) for Format de305d54-75b4-431b-adb2-eb6b9e546014
    var start = 0;
    BLOCK_LENGTHS.forEach(function(blockLength, index) {
        start += blockLength;
        if (value.length >= start) {
            let lastBlockChar = value.substr(start - 1, 1);
            let sep = value.substr(start, 1);
            // case 1: last block char is separator due to deleting last block character => remove it!
            if (lastBlockChar === SEP) {
                value = value.substring(0, start-1) + value.substr(start);
            }
            // case 2: add a last block character => add seperator
            else if (value.length === start && index !== BLOCK_LENGTHS.length-1) {
                // check also if user does not want to drop the separator
                if (value.length >= oldValue.length)
                    value += SEP;
            }
        }
        start++; // add seperator length
    });
    this.token.updateValue(value.substr(0, start-1), {onlySelf:true, emitEvent:true});
    this.token.markAsDirty(true);
}

static tokenValidator(control) {
    // de305d54-75b4-431b-adb2-eb6b9e546014
    let value, re;
    let start = 0;
    let output = null;
    for (let index = 0; index < BLOCK_LENGTHS.length; index++) {
        let blockLength = BLOCK_LENGTHS[index];
        value = control.value.substr(start, blockLength);
        re = new RegExp(`^[A-Fa-f0-9]{${blockLength}}$`, '');
        if (!value.match(re)) {
            output = {};
            output[`invalid_block_${index+1}`] = true;
            break;
        }
        start += blockLength+1;
    }

    return output;
}

The functionality of onKeyUp is quite simple: it enforces uppercase characters and a separation “-” to structure the UUIDv4 format (e.g. XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX). In a desktop browser this “hack” of rewrite works but in Android it works only if I press the enter button. When I write for example an “a”, it changes the example to “A” but within seconds it changes it again back to “a”.

I hope I could illustrate my problem and hope you can give me a hint to solve this problem :slight_smile:

5

try ngModel="{{your value}}" for binding data into input , i’m doin this in one of my app

[(ngModel)]=“inputField” dont work [value]=""

6

Thank you for your reply, but unfortunately this does not solve the problem :frowning: