Поле Angular теряет фокус на проверке при замене блоком ngTemplate

avatar
AmbroseChapel
9 августа 2021 в 04:13
178
0
0

Код выглядит примерно так:

 <div class="inline-field invalid" *ngIf="customerForm.get('customerAddress').errors; else customerAddressValidBlock">
    <input class="form-input field invalid-field" name="customerAddress" type="customerAddress"
           formControlName="customerAddress" placeholder="Customer Address"
           value="{{ customerForm.get('customerAddress').value }}" [focusMe]="data.isFocusOnAddress">
    <div class="field-error">
      <span>Card Holder Name is required</span>
    </div>
  </div>
  <ng-template #customerAddressValidBlock>
    <div class="inline-field valid" *ngIf="customerForm.get('customerAddress').value; else customerAddressBlock">
      <input class="form-input field valid-field" name="customerAddress" type="customerAddress"
             formControlName="customerAddress" placeholder="Customer Address"
             value="{{ customerForm.get('customerAddress').value }}" [focusMe]="data.isFocusOnAddress">
    </div>
  </ng-template>

И как только в исходное поле customerAddress вводится какой-либо текст, он становится действительным, после чего он заменяется, а поле замены не фокусируется.

Итак, после ввода одного символа (или двух, если вы печатаете очень быстро) поле blurs и в поле больше не поступают символы. Обработчик события input, я вижу из инструментов отладки, но я унаследовал эту проблему от кого-то другого, и я недостаточно знаю об Angular, чтобы понять следующий шаг. Он подменяет содержимое, если нет ошибок. Итак, замените содержимое и переориентируйте поле замены?

ТИА

Источник
Eliseo
9 августа 2021 в 06:33
1

у вас есть два входа: один для действительного, а другой для недействительного? почему бы не использовать уникальный ввод и [ngClass], чтобы изменить класс - действительно Angular, но добавить класс ng-invalid и ng-valid к вашим вводам-. Кстати, вы должны не использовать значение и formControl в одном и том же теге (ввод получает значение formControl. Как любопытство, когда поля становятся действительными/недействительными, он показывает тот или иной ввод, поэтому вы теряете фокус -Я не знаю о вашей директиве [focusMe], но я думаю, что ваша переменная data.isFocused не изменяется, когда вы вводите входные данные, и именно по этой причине у вас нет фокуса

Ответы (0)