第一次输入符号后输入失去焦点

Question

我有授权组件，用户使用他们的电话号码作为登录名。还有问题是输入一个符号（不管是字母还是数字）input 失去焦点，用户需要再次单击它才能进一步输入。
UPD: 忘了说有 3 个输入。一开始会有第一个输入，当它为空时。在输入第一个数字后，它将被第二个或第三个输入替换，具体取决于哪个国家的用户。对于某些国家，它将被替换为带有 +7 前缀的输入，对于另一个带有 +9 前缀的输入
html:

<input [(ngModel)]="phone"
             *ngIf="isPhoneEmpty()"
             class="phone-input m-b-50"
             id="phone-input"
             type="text"
             name="phone"
             minlength=18
             placeholder="Phone number"
             required>

    <input [(ngModel)]="phone"
             *ngIf="checkCountry() && !isPhoneEmpty()"
             class="phone-input m-b-50"
           id="phone-input"
             type="text"
             name="phone"
             minlength=18
             placeholder="Phone number"
             prefix="+7"
             mask=" (000) 000-00-00"
           autofocus
             required>

      <input [(ngModel)]="phone"
             *ngIf="!checkCountry() && !isPhoneEmpty()"
             class="phone-input m-b-50"
             id="phone-input"
             type="text"
             name="phone"
             placeholder="PhoneNumber"
             prefix="+996"
             mask=" (000) 000-000"
             autofocus
             required>

组件：

import { HostListener} from '@angular/core';
phone: string;

checkCountry() {
    return this.currentCountry.name === this.countryList[0].name;
  }
isPhoneEmpty() {
    return this.phone === '';
  }

@HostListener('document:keypress', ['$event'])
  handleKeyboardEvent(event: KeyboardEvent) {

    const numbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];

    if (numbers.indexOf(event.key) !== -1) {
     this._documentRef.getElementById('phone-input').focus();
    }
  }

Answer 1

问题是您有 3 个输入，并且您使用 *ngIf 在这 3 个输入之间切换。当手机为空时，您会显示第一个输入，并且一旦您输入内容，第一个输入的 *ngIf 将为 false，然后第一个输入将不会被呈现，而是第二个将呈现，这就是您输的原因将焦点放在第一个输入上。

我建议你只有一个输入字段，为什么需要三个？

Answer 2

您如何知道电话号码来自哪个国家/地区。只是从第一个数字？还是用户已经向您提供了这些信息？

如果您已经拥有信息，请使用该信息在页面加载时显示所需的输入，而不是在用户开始输入时显示。现在第一次按键后输入发生变化导致失去焦点。