Angular: запуск проверки элемента управления формы при изменении другого элемента управления формы

Question

Пожалуйста, обратитесь к проекту в стеке блиц здесь.

Как видно, у меня есть реактивная форма с элементами управления, как firstNumber, secondNumber а также thirdNumber, Мне нужно пройти проверку для контроля формы thirdNumber так что его значение не должно быть больше значения элемента управления формы, имеющего минимальное значение среди firstNumber а также secondNumber,

Пользовательский валидатор validateThirdNumber который там в компоненте работает нормально всякий раз, когда контроль формы thirdNumber изменения, но мне нужно запустить его проверки на изменения формы элементов управления firstNumber а также secondNumber тоже как логика валидации может меняться при изменении элементов управления формыfirstNumber а также secondNumber,

Для этого я добавил событие об изменении элементов управления формы firstNumber а также secondNumber где я отмечаю форму контроля thirdNumber как touched но его валидация, похоже, не сработала.

Итак, как запустить проверку для контроля формы thirdNumber об изменениях элементов управления формы firstNumber а также secondNumber?

Кроме того, почему this.myFormGroup не определено несколько раз в пользовательском валидаторе (см. логи в app.componen.ts в line:22) даже после привязки this к его форме контроля декларации и this.myFormGroup определяется в constructor?

Answer 1

Лучший выбор для вас - создать свой собственный глобальный валидатор.

class ValidateThirdNumber {
    static validate(control: AbstractControl) {
          console.log(control);
        if(control) {
           const firstNumber = control.get('firstNumber').value;
           const secondNumber = control.get('secondNumber').value;
           const thirdnumber = control.get('thirdNumber').value;
        if (firstNumber > secondNumber) {
          if (thirdnumber > secondNumber) {
            control.get('thirdNumber').setErrors( {greaterThanSecondNumber: true} );   
          }
        } else if (firstNumber < secondNumber) {
          if (thirdnumber > firstNumber) {
              control.get('thirdNumber').setErrors( {greaterThanFirstNumber: true} ); 
          }
        }
        }
        return null;
        }
}

Инициализация формы группы должна быть:

 this.myFormGroup = this.fb.group({
      firstNumber: [0],
      secondNumber: [0],
      thirdNumber: [0]
    }, {validator: [ValidateThirdNumber.validate] });

вам больше не нужен атрибут прикосновения

<span *ngIf="myFormGroup.get('thirdNumber').errors?.greaterThanFirstNumber">
  Third number cannot be greater than First Number
 </span>
    <span *ngIf=" myFormGroup.get('thirdNumber').errors?.greaterThanSecondNumber">
  Third number cannot be greater than Second Number
 </span>

также вам не нужно (change) события удаляют их

Answer 2

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

<div>

    <form [formGroup]="myFormGroup" #formRef="ngForm">

        First number:<input #firstNum type="number" formControlName="firstNumber"><br/>

  Second number:<input #secondNum type="number" formControlName="secondNumber"><br/>

  Third number:<input #thirdNum type="number" formControlName="thirdNumber"><br/>

    <span *ngIf="firstNum && thirdNum && (thirdNum.value > firstNum.value)">
  Third number cannot be greater than First Number
 </span>
 <hr>
    <span *ngIf="secondNum && thirdNum && (thirdNum.value > secondNum.value)">
  Third number cannot be greater than Second Number
 </span>

</form>


</div>

И удалите все проверки в вашем .ts файл.

Если вы начнете создавать более крупные компоненты, тогда вариант проверки формы будет наилучшим.