I am working on a login form where I need to toggle the visibility of the password text. Below is the code snippet that I have implemented.
Here is the code I tried:
<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 my component.ts file, I have written the following 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";
}
}
}
After clicking the toggleShow() function and checking in the console with console.log(this.show), the output shows true/false, but nothing changes in the template. Can you suggest any ideas or point me to what might be wrong in my code?
Thank you!