'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