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

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

<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.

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

Answer 2

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

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), удалите их