Angular6 下的注册界面中的密码框隐藏密码和明文密码切换

技术：

       Angular6+bootStrap

需求：

       做一个注册界面，界面上有一个密码输入框，默认情况下，密码框输入显示给客户是看不到明文的，但实际中，有时用户都不知道自己的密码是什么了，因此，在密码框中增加一个小图标，点击小图标后，密码框中的值可以进行显示和密码形式的切换。

思路：

      点击小图标后，小图标切换，密码输入框的type值在text和password之间进行切换

涉及知识点：

       Angular6对dom的操作，尤其是对dom元素的属性的变更操作。

code:

1、前段界面：

   注册页面，主要是一个form,且在小图标处定义一个click事件：onClickKye

<form  *ngIf="user" [formGroup]="userForm" (ngSubmit)="onSubmit();" class="form-horizontal" #registerForm>
      <div class="box-body " style="padding-bottom: 5px;">
    
    
      <div  formGroupName="passwordGroup" style="border:none;">
      <div class="form-group has-feedback col-lg-12 col-md-12" style="padding-right: 0px;">
        <label class="control-label col-lg-3 editForm-label">密码：</label>
        <div class="col-lg-9 editForm-data">
        <input type="password" class="form-control" id="password" formControlName="password" required placeholder="输入密码">
        <span id="pwdSpan" class="glyphicon glyphicon-eye-close form-control-feedback" (click)="onClickEye()"  style="display:inline-block;pointer-events: auto"></span>
        
        </div>
      </div>

      </div>
     

      <div class="row">
        <!-- /.col -->
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
          <button type="submit"  class="btn btn-primary btn-block btn-flat">注册</button>
      
      </div>
      </div>
    </form>

 2、控制类代码 核心代码是定义小图标的点击事件：

import {Component, ElementRef, Input, OnInit, Renderer2, ViewChild} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {Router} from '@angular/router';
import {UserInfo} from '../../customer/sysuser/userInfo';



@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {
  @ViewChild('registerForm')
  registerForm: ElementRef;

  @Input() user: UserInfo = new UserInfo(); // 导入数据
  userForm: FormGroup; // 表单组对象
  constructor(public router: Router, private fb: FormBuilder,
              private render: Renderer2, ) {
    this.userForm = this.fb.group({
      name: [''],
      account: [''],
      passwordGroup: this.fb.group({
        password: [''],
        // confirmPsw: ['']
      }),
      phone: [''],
      phoneCode: [''],
    });
  }

  ngOnInit() {
    this.userForm.reset();
    this.setFormData();
  }


  /**
   * 设置表单数据值
   */
  setFormData() {
    if (null == this.user) {
      this.user = new UserInfo();
    }
    this.userForm.patchValue({
      id: this.user.id,
      name: this.user.name,
      password: this.user.password,
      account: this.user.account,
      phone: this.user.phone,
      registTime: this.user.registTime,
      flag: this.user.flag,
      lastTime: this.user.lastTime,
      loginCount: this.user.loginCount,
      wxId: this.user.wxId
    });
  }

  /**
   * 注册
   */
  onSubmit() {
     // 此处写自己的注册提交业务
  }

  /**
   *  注册页面密码输入框中的图标点击切换事件
   */
  onClickEye() {
    // 密码输入框内的小图标
    const pwdSpan: HTMLElement = this.registerForm.nativeElement.querySelector('#pwdSpan');
    // 密码输入框
    const pwdInput: HTMLElement = this.registerForm.nativeElement.querySelector('#password');
    // 当前图标样式
    const spanClass = pwdSpan.getAttribute('class');
    // 显示模式下的小图标样式
    const openClass = 'glyphicon-eye-open';
    // 隐藏模式下的小图标样式
    const closeClass = 'glyphicon-eye-close';
    if (spanClass.indexOf(closeClass) > 0) {
      // 隐藏模式，则需要切换到显示模式
      this.render.removeClass(pwdSpan, closeClass);
      this.render.addClass(pwdSpan, openClass);
      this.render.setAttribute(pwdInput, 'type', 'text');
    } else {
      // 显示模式，则需要切换到隐藏模式
      this.render.removeClass(pwdSpan, openClass);
      this.render.addClass(pwdSpan, closeClass);
      this.render.setAttribute(pwdInput, 'type', 'password');
    }
  }



}

 

3、用户实体类userinfo.ts

export class UserInfo {
  id: string;
  name: string;
  password: string;
  account: string;
  phone: string;
  companyName: string;
  remark: string;
  registTime: string;
  flag: number;
  lastTime: string;
  loginCount: number;
  wxId: string;

  getFullName(): string {
    return this.id + ' ' + this.name;
  }
}

 注意点：其实思路很简单，刚开始卡在Anguar6中对dom元素的操作，这里主要是使用了Renderer2这个操作类做了处理，可以详细看代码中的处理方式。