Programmatically change the EditableTextBase's widgets keyboardType property


#1

I want to change textfield/textview widget’s keyboardType property Programmatically based on some other widget’s onTap event.

Means in my app textfield as search bar, Followed by some buttons(10 Nos.) are placed.
Based on the button onTap event, Need to change the keyboardtype of textfield.

FYI,
My search page,

Please suggest!


#2

I have tried as follows,

app.component.html

<StackLayout>
<TextField #checktf hint="check keyboardtype" class="input input-border" autocorrect="false" autocapitalizationType="none">
</TextField>
<Button text="numeric" class="btn btn-primary btn-rounded-sm" (tap)="changeKB('num')"></Button>
<Button text="email" class="btn btn-primary btn-rounded-sm" (tap)="changeKB('normal')"></Button>
</StackLayout>

app.component.ts

@ViewChild('checktf') texfield:ElementRef;  

-------------------------

public changeKB(args){
    let cont = <View>this.texfield.nativeElement;
if(args == "num"){
cont.android.keyboardType="number";
}
else if(args == "normal"){
cont.android.keyboardType="email";
}
}

But got an below error,

JS: ERROR TypeError: _co.changeKB is not a function
JS: ERROR CONTEXT [object Object]
JS: ERROR TypeError: _co.changeKB is not a function
JS: ERROR CONTEXT [object Object]

Any idea on this?


#3

As discussed in this issue,

The given scenario is works as expected :grinning:

import {TextField} from "ui/text-field"
import {isIOS} from "platform"
----------------------------------------------
public changeKB(args){
let comp:TextField = <TextField> this.page.getViewById("tfId")
if(args == "num"){
comp.keyboardType="number";
console.log("num");
}
else if(args == "normal"){
comp.keyboardType="email";
console.log("normal");
}
  if(isIOS){
            comp.dismissSoftInput();
            setTimeout(() => {
                comp.focus();
            }, 100);
        }
}