Валидатор управления формой не работает, когда валидатор группы добавлен в formBuilder - PullRequest
Новая
       17

Валидатор управления формой не работает, когда валидатор группы добавлен в formBuilder

0 голосов
/ 12 марта 2019

Заранее извиняюсь, если моя проблема тривиальна, но сейчас я делаю свои первые шаги с Angular.Я потратил много часов на поиски, но безрезультатно, поэтому любая помощь будет очень признательна.

В ngOnInit моего компонента я создаю реактивную форму с formBuilder.Оба моих минимальных, максимальных элемента управления формой назначены необходимые валидаторы, а также разделяют валидатор группы 'minMaxValidator'. 

ngOnInit(){
    // initialize myForm
    this.myForm = this.formBuilder.group({
        max: [null, [Validators.required]],
        min: [null, [Validators.required]],
    },
    {
        validator: this.formValidationService.minMaxValidator
    })

}

minMaxValidator внутри моей formValidationService выглядит так: 

minMaxValidator(control: AbstractControl): { [key: string]: any } {
    let minControl = control.get('min');
    let maxControl = control.get('max');

    if (maxControl.value <= minControl.value) {
        // add ng-invalid class to min & max controls
        minControl.setErrors({ 'invalidMinMax': true });
        maxControl.setErrors({ 'invalidMinMax': true });
        return { 'invalidMinMax': true };
    } else {
        // remove ng-invalid class from min & max controls
        minControl.setErrors(null);
        maxControl.setErrors(null);
        return null;
    }
}

Моя самая серьезная проблема с вышеупомянутой реализацией состоит в том, что, когда поле min пусто, требуемый валидатор, похоже, не срабатывает, поэтому я не получаю сообщение об ошибке (статус формы все еще действителен, а объект ошибок min равен нулю).Этого не происходит, если комментарий из minMaxValidator.Почему?

Вот мой шаблон. 

<form [formGroup]="myForm" (ngSubmit)="onSubmit()" #form="ngForm">
  <label for="limitMin">Min Limit</label>
  <input formControlName="min" id="limitMin" class="form-control" type="number">
  <validation-message [control]="myForm.controls.min" [isFormSubmitted]="form.submitted"></validation-message>
</form
...