如何将自定义数字键盘的输入值与input输入框实现双向绑定

问题原因 #

你当前声明的password是数字数组类型，而input输入框的[(ngModel)]只能适配字符串、数字这类基础类型，直接绑定数组无法正常显示输入内容。

具体修改方案 #

1. 调整login.ts逻辑代码 #

把password改为字符串类型适配输入框绑定，同时补全删除逻辑：

// password改为字符串类型，和input输入框类型匹配
password: string = '';

click(num: number){
  // 点击数字后拼接到password末尾
  this.password += num.toString();
}

// 补全删除方法逻辑
deletePass(){
  // 已有内容时才执行删除，避免空内容报错
  if(this.password.length > 0){
    this.password = this.password.slice(0, -1);
  }
}

如果后续业务需要用到数组格式的密码，可额外加一个转换用的getter：

// 按需添加：返回数字数组格式的密码供后续逻辑使用
get passwordNumArr(): number[] {
  return this.password.split('').map(item => Number(item));
}

2. 调整HTML代码（可选优化） #

给input加readonly属性，禁止用户手动唤起系统键盘输入，保证只能用自定义数字键盘操作：

<input type="text" name="" id="" class="password-input" [(ngModel)]="password" placeholder="Password" readonly>
<!-- 剩余键盘部分代码不需要修改 -->
<ul id="keyboard">   
    <li class="letter" (click)="click(1)">1</li>  
    <li class="letter" (click)="click(2)">2</li>  
    <li class="letter" (click)="click(3)">3</li>  
    <li class="letter clearl" (click)="click(4)">4</li>  
    <li class="letter" (click)="click(5)">5</li>  
    <li class="letter" (click)="click(6)">6</li> 
  
    <li class="letter clearl" (click)="click(7)">7</li>  
    <li class="letter" (click)="click(8)">8</li>  
    <li class="letter" (click)="click(9)">9</li>  
    <li class="letter" (click)="click(0)">0</li>
    <li class="switch">abc</li>  
     <li class="return">retur</li>
     <li class="delete lastitem" (click)="deletePass()"><</li>   
</ul>

如果需要隐藏输入内容，把input的type属性改为password即可。

内容的提问来源于stack exchange，提问作者besim