Элемент управления Angular Reactive Form с type = number будет перерисовываться при размытии

Question

У меня есть реактивная форма Angular (v7) (может быть такой же для формы только для шаблона).<input> с type="number" выполнит повторную визуализацию и запустит проверку на размытие.
В сообщении об ошибке <div> рядом с <input> имеется кнопка с предложением значения, и нажатие кнопки заполнит вводпредлагаемое значение (предоставляется асинхронным валидатором).
Однако, если вы нажмете кнопку в первый раз, размытие <input> вызовет повторную визуализацию всего элемента, таким образом, не повлияв на ввод.Вам нужно нажать кнопку еще раз, чтобы она заработала.

Я не нашел никакой опции, чтобы отключить это поведение повторного рендеринга.

Демо: stackblitz.com

.ts Файл:

ngOnInit(): void {
    this.newPlanForm = this.formBuilder.group({
      plan_id: [
        {
          value: this.plan.plan_id,
          disabled: !this.plan.insurer_id,
        }, {
          validators: [Validators.required, this.planIdSyntaxValidator.bind(this)],
          asyncValidators: this.planIdDuplicationValidator.bind(this),
          // updateOn: 'blur' // this is my hacky solution. The original problem occours without it
        }
      ],
      ...
    });
}

planIdDuplicationValidator(control: AbstractControl): Observable<ValidationErrors | null> {
    // duplication check
    ...
}

fillInSuggestedPlanId(): void {
    this.form.plan_id.setValue(this.form.plan_id.errors.duplicatePlanId);
}

// convenience getter for easy access to form fields
get form() {
    return this.newPlanForm.controls;
}

HTML:

<form [formGroup]="newPlanForm">
    ...
    <label for="plan_id">Plan ID<sup>*</sup></label>
    <input type="number" class="form-control" id="plan_id" name="plan_id"
           [ngClass]="{ 'is-invalid': form.plan_id.errors }"
           formControlName="plan_id"/>
    <div class="invalid-feedback" *ngIf="form.plan_id.dirty && form.plan_id.errors">
      <p *ngIf="form.plan_id.errors.duplicatePlanId">
        This plan ID is already taken. Next available is
        <a (click)="fillInSuggestedPlanId()" class="btn-link">
          {{suggestedPlanID}}
        </a>
      </p>
    </div>
    ...
</form>

Answer 1

Обратите внимание следующее примечание, помещенное в спецификации для ввода = число :

Примечание: состояние типа = число не подходит для ввода, который состоит только изчисла, но не строго говоря число.Например, это не подходит для номеров кредитных карт или почтовых индексов США.Простой способ определить, следует ли использовать type = number, состоит в том, чтобы рассмотреть, имеет ли смысл для элемента управления вводом иметь интерфейс spinbox (например, со стрелками «вверх» и «вниз»).Неправильное ошибочное определение номера кредитной карты на 1 в последней цифре - это такая же ошибка, как и неправильное получение каждой цифры.Поэтому для пользователя не имеет смысла выбирать номер кредитной карты с помощью кнопок «вверх» и «вниз».Когда интерфейс spinbox не подходит, type = text, вероятно, является правильным выбором (возможно, с атрибутом pattern).

Я должен спросить: почему бы не использовать просто type=text?