'TextField focus() not working
Using sample-Groceries-angular I'm trying to focus password instead of email by clicking a button
┌──────────────────┬─────────────────┬────────────────┬───────────────┐
│ Component │ Current version │ Latest version │ Information │
│ nativescript │ 2.3.0 │ 2.3.0 │ Up to date │
│ tns-core-modules │ 2.3.0 │ 2.3.0 │ Up to date │
│ tns-android │ 2.3.0 │ 2.3.0 │ Up to date │
│ tns-ios │ │ 2.3.0 │ Not installed │
└──────────────────┴─────────────────┴────────────────┴───────────────┘
xml:
<TextField #email hint="Email Address" keyboardType="email" [(ngModel)]="user.email"
autocorrect="false" autocapitalizationType="none"></TextField>
<TextField #password hint="Password" secure="true" [(ngModel)]="user.password"></TextField>
<Button text="Focus Password" (tap)="focusDat()"></Button>
typescript:
@ViewChild("password") password: ElementRef;
focusDat() {
let password = <TextField>this.name.nativeElement;
console.log(password.focus());
}
output:
JS: false
Solution 1:[1]
Thanks to Nikolay Tsonev I just focused the wrong field was:
let password = <TextField>this.name.nativeElement;
should be:
let password = <TextField>this.password.nativeElement;
it's working fine, just made a silly mistake...
Solution 2:[2]
you should refer this I tried to create OTP mech.
<TextField col="0" maxlength="1" (textChange)="o1()" verticalAlignment="center" style.placeholderColor="gray" [(ngModel)]="one" required #1ng="ngModel" returnKeyType="next" keyboardType="number"></TextField>
<TextField col="1" maxlength="1" #b (textChange)="o2()" verticalAlignment="center" style.placeholderColor="gray" [(ngModel)]="two" required #2ng="ngModel" returnKeyType="next" keyboardType="number"></TextField>
<TextField col="2" maxlength="1" #c (textChange)="o3()"verticalAlignment="center" style.placeholderColor="gray" [(ngModel)]="three" required #3ng="ngModel" returnKeyType="next" keyboardType="number"></TextField>
<TextField col="3" maxlength="1" #d verticalAlignment="center" style.placeholderColor="gray" [(ngModel)]="four" required #4ng="ngModel" returnKeyType="done" keyboardType="number"></TextField>
.ts
one=''
two=''
three=''
four=''
@ViewChild("b", { static: false }) b: ElementRef;
@ViewChild("c", { static: false }) c: ElementRef;
@ViewChild("d", { static: false }) d: ElementRef;
o1(){
this.b.nativeElement.focus()
}
o2(){
this.c.nativeElement.focus()
}
o3(){
this.d.nativeElement.focus()
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | AboAlwi |
| Solution 2 | aditya_adi_98 |
