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

我有一个授权组件，用户使用他们的电话号码作为登录。还有一个问题是，在输入一个符号（不管是字母还是数字）后，

输入将失去焦点，用户需要再次单击它以进一步输入。

UPD:
忘记提到有3个输入。在开始时，将有第一个输入，当其为空时。输入第一个数字后，它将被第二个或第三个输入替换，具体取决于用户所在国家。对于某些国家/地区，它将替换为前缀为+7的输入，对于另一个国家/地区，它将替换为前缀为+9的输入


html:

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

我建议您只有一个输入字段，为什么需要三个？
您如何知道电话号码来自哪个国家。就从第一个号码开始？或者用户是否已经向您提供了该信息

如果您已经有了这些信息，请在加载页面时而不是在用户开始键入时使用这些信息来显示所需的输入。现在，输入在第一次按键后发生变化，导致焦点丢失。
如果删除
*ngIf
，是否仍会发生这种情况？尝试将其更改为type='tel'@reactular添加了更多信息您是否考虑过使用反应式表单来更好地控制表单控件？这还允许您使用每个输入的
valueChanges
观察值。直接访问DOM是一种角度计数器模式。在同一页面中，我有一个
选择
，带有2个选项/countries@Massaget然后，我将根据该选择更改显示的输入。这可能导致另一个问题。如果用户输入手机，然后更改国家/地区。但是，由于所有输入都使用相同的ngModel，因此掩码和前缀应该更改。试试看。
<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();
    }
  }