Angular 7 React Form Builder, пользовательский перекрестный валидатор не работает

Question

Вот мой HTML:

<mat-form-field>
    <input matInput type="number" min="0" max="100" step="1" placeholder="Allowed Attendance (%)" required [formControl]="allowed" name="allowed_attendance">
    <mat-error *ngIf="allowed.invalid">Value must be 0-100</mat-error>
</mat-form-field>
<mat-form-field>
    <input matInput type="number" min="0" max="100" step="1" placeholder="Fined Attendance (%)" required [formControl]="fined" name="fined_attendance">
    <mat-error *ngIf="fined.invalid">This value must be less than allowed attendance</mat-error>
</mat-form-field>
<mat-form-field>
    <input matInput required [formControl]="ldo_form_fill_up" placeholder="Applicable Until" [matDatepicker]="picker" name="ldo_form_fill_up">
    <mat-datepicker-toggle #toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
    <mat-error *ngIf="ldo_form_fill_up.invalid">A valid date is required</mat-error>
</mat-form-field>
<mat-form-field *ngIf="ldo_form_fill_up.valid">
    <input matInput required [formControl]="ldo_payment" placeholder="Payable Until" [matDatepicker]="picker2" name="ldo_payment">
    <mat-datepicker-toggle #toggle2 matSuffix [for]="picker2"></mat-datepicker-toggle>
    <mat-datepicker #picker2></mat-datepicker>
    <mat-error *ngIf="ldo_payment.invalid">This date must be greater than the above</mat-error>
</mat-form-field>

Вот элементы управления формой геттеров:

get ldo_form_fill_up() {
  return this.form.get('ldo_form_fill_up');
}

get ldo_payment() {
  return this.form.get('ldo_payment');
}

get allowed() {
  return this.form.get('allowed_attendance');
}

get fined() {
  return this.form.get('fined_attendance');
}

Вот конструктор форм:

this.form = fb.group({
  allowed_attendance: fb.control(70, [Validators.required, Validators.min(0), Validators.max(100)]),
  fined_attendance: fb.control(60, [Validators.required, Validators.min(0), Validators.max(100)]),
  ldo_form_fill_up: fb.control('', Validators.required),
  ldo_payment: fb.control('', Validators.required),
}, {
  validators: customRangeValidator
});

Вотпользовательский валидатор:

export function customRangeValidator(group: FormGroup) {
  const date1 = group.controls.ldo_form_fill_up;
  const date2 = group.controls.ldo_payment;
  const attd1 = group.controls.allowed_attendance;
  const attd2 = group.controls.fined_attendance;
  if (date1.value >= date2.value) {
    date2.setErrors({
      customRangeValidator: true
    });
  }
  if (attd2.value >= attd1.value) {
    attd2.setErrors({
      customRangeValidator: true
    });
  }
  return null;
}

Что мне нужно: fined_attendance < allowed_attendance и ldo_payment > ldo_form_fill_up

Что происходит:

1. Ввод 70 in allowed_attendance
2. Ввод 60 in fined_attendance
3. Нет ошибки для fined_attendance (все в порядке).
4. Измените allowed_attendance на 50.
5. Ошибка отображается для fined_attendance (это также нормально).
6. Снова измените allowed_attendance на 70.
7. Ошибка по-прежнему отображается. (это НЕ ОК) .
8. Но очистить и повторно ввести 60 в fined_attendance, Ошибка исчезла!

Итак, я сталкиваюсьпроблема, показанная в step 7.Что я не так делаю?

Answer 1

Я думаю, что вы заботитесь только об установке ошибок, а не об их очистке.

В остальных случаях вы также должны их очистить.Вот как:

import { Component } from '@angular/core';
import { FormBuilder, Validators, FormGroup } from '@angular/forms';

/** @title Simple form field */
@Component({
  selector: 'form-field-overview-example',
  templateUrl: 'form-field-overview-example.html',
  styleUrls: ['form-field-overview-example.css'],
})
export class FormFieldOverviewExample {

  form: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.form = this.fb.group({
      allowed_attendance: this.fb.control(70, [Validators.required, Validators.min(0), Validators.max(100)]),
      fined_attendance: this.fb.control(60, [Validators.required, Validators.min(0), Validators.max(100)]),
      ldo_form_fill_up: this.fb.control('', Validators.required),
      ldo_payment: this.fb.control('', Validators.required),
    }, { validators: customRangeValidator });
  }

  submit() {
    console.log(this.form.value);
  }

  get ldo_form_fill_up() {
    return this.form.get('ldo_form_fill_up');
  }

  get ldo_payment() {
    return this.form.get('ldo_payment');
  }

  get allowed() {
    return this.form.get('allowed_attendance');
  }

  get fined() {
    return this.form.get('fined_attendance');
  }

}

export function customRangeValidator(group: FormGroup) {
  console.log('Called');
  const { ldo_form_fill_up, ldo_payment, allowed_attendance, fined_attendance } = group.controls;
  if (fined_attendance.value >= allowed_attendance.value) {
    fined_attendance.setErrors({ customRangeValidator: true });
  } else {
    fined_attendance.setErrors(null);
  }
  if (ldo_form_fill_up.value >= ldo_payment.value) {
    ldo_payment.setErrors({ customRangeValidator: true });
  } else {
    ldo_payment.setErrors(null);
  }
  return null;
}

Кроме того, в вашем шаблоне вместо [formGroup] почему бы вам просто не использовать formGroupName.Примерно так:

<form [formGroup]="form">
  <mat-form-field>
    <input matInput type="number" min="0" max="100" step="1" placeholder="Allowed Attendance (%)" required formControlName="allowed_attendance" name="allowed_attendance">
    <mat-error *ngIf="allowed.invalid">Value must be 0-100</mat-error>
  </mat-form-field>
  <mat-form-field>
    <input matInput type="number" min="0" max="100" step="1" placeholder="Fined Attendance (%)" required formControlName="fined_attendance" name="fined_attendance">
    <mat-error *ngIf="fined.invalid">This value must be less than allowed attendance</mat-error>
  </mat-form-field>
  <mat-form-field>
    <input matInput required formControlName="ldo_form_fill_up" placeholder="Applicable Until" [matDatepicker]="picker" name="ldo_form_fill_up">
    <mat-datepicker-toggle #toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
    <mat-error *ngIf="ldo_form_fill_up.invalid">A valid date is required</mat-error>
  </mat-form-field>
  <mat-form-field *ngIf="ldo_form_fill_up.valid">
    <input matInput required formControlName="ldo_payment" placeholder="Payable Until" [matDatepicker]="picker2" name="ldo_payment">
    <mat-datepicker-toggle #toggle2 matSuffix [for]="picker2"></mat-datepicker-toggle>
    <mat-datepicker #picker2></mat-datepicker>
    <mat-error *ngIf="ldo_payment.invalid">This date must be greater than the above</mat-error>
  </mat-form-field>

  <br>

  <button 
    [disabled]="form.invalid"
    mat-raised-button 
    color="primary"
    (click)="submit()">
    Primary
  </button>

</form>

---

Вот вам Рабочий образец StackBlitz для вашей ссылки.