Ошибка проверки исчезла при потере фокуса Угловая форма

Question

у меня угловая реактивная форма

HTML-файл

                    <mat-form-field>
                        <input formControlName="addressNumber" matInput type="number" [placeholder]="addressNumber"/>
                    </mat-form-field>
                    <div *ngIf="errorMessage" class="warnColorText">{{errorMessage}}</div>

Файл ts

           this.editForm = this.fb.group({
            addressNumber: [0, [
            Validators.required,
            this.formValidation.customMinMaxValidation(2, 256)
        ]],
         ...});

У меня также есть код для добавления асинхронного валидатора в файл ts после инициализации формы.

this.editForm.get('addressNumber').setAsyncValidators([this.formValidation.uniqueNumberValidation()]);

Все отлично работает. Если номер не является уникальным, форма отобразит ошибку. Однако ошибка исчезает, если поле теряет фокус. Что может привести к исчезновению ошибки, когда поле не в фокусе?

Answer 1

вы можете связать errorMessage для своей пользовательской проверки и использовать непосредственно в своем HTML через @ rxweb / реактивные-формы-валидаторы, вам нужно объявить свою пользовательскую проверку в пользовательских валидаторах, как это:

 addressNumber:['',RxwebValidators.compose({validators:[this.uniqueNumberValidation()]})]

Согласно этому примеру, если вы добавите 1 в addressNumber, будет отображено сообщение об ошибке.

Компонент ТС:

import { Component, OnInit, } from '@angular/core';
import { FormGroup,AbstractControl } from "@angular/forms"
import { RxFormBuilder,RxwebValidators } from '@rxweb/reactive-form-validators';

@Component({
    selector: 'app-compose-validators',
    templateUrl: './compose-validators.component.html'
})
export class ComposeValidatorsComponent implements OnInit {
    userFormGroup: FormGroup

    constructor(
        private formBuilder: RxFormBuilder    ) { }

    ngOnInit() {

        this.userFormGroup = this.formBuilder.group({
          addressNumber:['',RxwebValidators.compose({validators:[this.uniqueNumberValidation()]})]
        });
    }
     uniqueNumberValidation() {
  return (control: AbstractControl) => {
        if (control.value != 1)
            return null;
        else
            return {
                'addressNumber': { message: "Address Number Should be Unique" }
            };
    }
}
}

<div>
  <form [formGroup]="userFormGroup">
    <div class="form-group">
      <label>Address Number</label>
      <input type="text" formControlName="addressNumber" class="form-control" />
      <small class="form-text text-danger" *ngIf="userFormGroup.controls.addressNumber.errors">{{userFormGroup.controls.addressNumber.errorMessage}}<br /></small>
    </div>
    <button [disabled]="!userFormGroup.valid" class="btn btn-primary">Submit</button>
  </form>
</div>

Пример Stackblitz

Answer 2

Вы используете угловой материал? Я полагаю, что из предоставленного вами HTML.

Вы пытались добавить сообщение об ошибке в теги <mat-form-field>? как в их документации @ https://material.angular.io/components/form-field/overview#error-messages

, например

  <mat-form-field>
    <input formControlName="addressNumber" matInput type="number [placeholder]="addressNumber"/>
    <mat-error *ngIf="addressNumber.invalid">{{errorMessage}}</mat-error>
  </mat-form-field>