CODEWITHSUNDEEP
javascripthtmlangularangular-forms
Mr.X
Mr.X

Reputation: 117

Password not getting displayed

I am working with angular and I am new to it . I need to toggle between text and password on click of button. I followed this post but still I am unable to see password . Can someone please help.The following is my html code

  <input type="tel" #x [(ngModel)]="loginuser.password" formControlName="password" name="password" id="password" placeholder="Enter your password" class="conceal-circle">
  <label for="password">Enter your password</label>
</div>
<span class="btn-eye">
  <a href="javascript:void(0);"  (click)="x.type=x.type=='password'?'text':'password'" class="text-dark text-decoration-none">
    <i class="fa fa-eye float-right"></i>
  </a>
</span>

The following is my typescript code

  export class LoginComponent implements OnInit {
      formGroup: FormGroup;

      currentUser: User;
    
      constructor(private router: Router, private formbuilder: FormBuilder,
        private authService: AuthService, private token: TokenStorage, private loginService: LoginserviceService) { }
    
      loginuser: LoginUser = new LoginUser();//contains user name and pwd
    
      ngOnInit() {
    

    
        this.currentUser = JSON.parse(window.sessionStorage.getItem('currentUser'));
        if (typeof this.currentUser !== 'undefined') {
          window.sessionStorage.removeItem('currentUser');
        }
        if (null !== this.token.getToken()) {
          this.token.signOut();
        }
        this.formGroup = this.formbuilder.group({
          userName: new FormControl('', Validators.required),
          password: new FormControl('', Validators.required)
        });
    
      }
    login(){
//some api calls here
}
      }
    
      cancel(): void {
        this.loginuser.userId = '';
        this.loginuser.password = '';
      }
    
    }

Upvotes: 2

Views: 299

Answers (2)

Ameer Amjed
Ameer Amjed

Reputation: 149

Try this

.HTML

</div>
  <input type="{{ isActive ? 'password' : 'text' }}"
[(ngModel)]="loginuser.password" formControlName="password" name="password" id="password" placeholder="Enter your password" class="conceal-circle">
  <label for="password">Enter your password</label>
</div>
<span class="btn-eye">
  <a href="javascript:void(0);"  (click)="eye()" class="text-dark text-decoration-none">
    <i class="fa fa-eye float-right"></i>
  </a>
</span>

.ts

isActive: boolean = true;

eye(){
  this.isActive = !this.isActive;
}

Hope help you.

Upvotes: 2

Derek Wang
Derek Wang

Reputation: 10193

The problem is with #x of input tag. You can't use x.value directly.

On angular typescript, pls add this code part.

@ViewChild('x') input;

And update the template as follows.

<a href="javascript:void(0);"  (click)="input.nativeElement.type=input.nativeElement.type=='password'?'text':'password'" class="text-dark text-decoration-none">
    <i class="fa fa-eye float-right"></i>
  </a>

Upvotes: 0

Related Questions