CODEWITHSUNDEEP
angulartypescriptnativescriptshow-hideangular2-nativescript
user10197973
user10197973

Reputation:

show/hide password text using Nativescript

I want to show/hidden password text in my login form. I have a code like below.

I try this code:

    <GridLayout margin="10" verticalAlignment="center" backgroundColor="#ffffff">
        <StackLayout margin="10" verticalAlignment="center" [formGroup]="signUpForm" padding="15">
            <StackLayout class="input-field">
                <TextField formControlName="username" hint="Username"></TextField>
            </StackLayout>
            <StackLayout class="input-field">
                <TextField formControlName="password" hint="Password" secure="true">
                </TextField>
            </StackLayout>
            <Label text ="show/hide" (tap)="toggleShow()"></Label>
        </StackLayout>
   </GridLayout>

In component.ts I write this code:

export class LoginComponent implements OnInit {
    signUpForm: FormGroup;
    show = false;
    type=  'password';
    constructor(....) {
        this.signUpForm = this.formBuilder.group({
            username: ["", Validators.required],
            password: ["", Validators.required]
        });
    }
    toggleShow()
    {
        this.show = !this.show;
        if (this.show){
            this.type = "text";
        }
        else {
            this.type = "password";
        }
    }
}

When I click the function toggleShow() in console.log(this.show) show true false, but in template doesn't show nothing. Can you ask me any idea please, what is wrong in my code?

Thank you!

Upvotes: 0

Views: 3870

Answers (4)

Sanved
Sanved

Reputation: 941

An extension to Sean's answer specifically for NativeScript-Vue if anyone is looking for it. 

<TextField class="input" :text="password" :secure="securePassword" ></TextField>

<Label class="passmsg" :text="passmsg" @tap="toggleShow()"></Label>

In Methods:

toggleShow () {
  this.securePassword = !this.securePassword
  if (this.securePassword) this.passmsg = 'Show Password'
  else this.passmsg = 'Hide Password'
}

Add passmsg in your data section

Upvotes: 2

Brian Lin
Brian Lin

Reputation: 124

EDIT: SeanStanden posted a better solution, which should be the accepted answer.

Personally, I'd prefer to alter the secure property on the Textfield using element references:

.ts:

export class HomeComponent {
    @ViewChild('passwordField') passwordField: ElementRef;

    constructor() { }

    toggleShow() {
        console.log(this.passwordField.nativeElement.secure);
        this.passwordField.nativeElement.secure = !this.passwordField.nativeElement.secure;
    }
}

.html:

<GridLayout margin="10" verticalAlignment="center" backgroundColor="#ffffff">
    <StackLayout margin="10" verticalAlignment="center" padding="15">
        <StackLayout class="input-field">
            <TextField hint="Username"></TextField>
        </StackLayout>
        <StackLayout class="input-field">
            <TextField #passwordField hint="Password" secure="true">
            </TextField>
        </StackLayout>
        <Label text="show/hide" (tap)="toggleShow()"></Label>
    </StackLayout>
</GridLayout>

example playground: https://play.nativescript.org/?template=play-ng&id=Xmy1Pv&v=3

Upvotes: 7

SeanStanden
SeanStanden

Reputation: 994

There's no reason to access the native element. You can bind to the 'secure' property and toggle e.g.:

<StackLayout class="input-field">
   <TextField formControlName="password" hint="Password" [secure]="securePassword">
   </TextField>
</StackLayout>
<Label text ="show/hide" (tap)="toggleShow()"></Label>

TS

toggleShow() {
  this.securePassword = !this.securePassword;
}

Upvotes: 7

Anji
Anji

Reputation: 715

Change your code as below.

<StackLayout class="input-field">
    <TextField formControlName="password" [hint]="passwordType" secure="true"></TextField>
</StackLayout>

TS:-

passwordType: string = "password";
toggleShow()
    {
        this.passwordType = (this.passwordType == "password") ? "text" : "password";
    }

Hope this helps.

Upvotes: 0

Related Questions