Angular 7反应式表单生成器，自定义交叉验证程序不工作

这是我的HTML：

值必须为0-100
此值必须小于允许的出席人数
必须提供有效日期
此日期必须大于上述日期

以下是getter表单控件：

get ldo\u form\u fill\u up（）{
返回此.form.get（'ldo_form_fill_up'）；
}
获取ldo_付款（）{
返回此.form.get（'ldo_payment'）；
}
被允许{
返回此.form.get（'allowed_Attention'）；
}
被罚款{
返回此.form.get（'fined_Attention'）；
}

以下是表单生成器：

this.form=fb.group({
允许出席人数：fb.control（70、[Validators.required、Validators.min（0）、Validators.max（100）]），
出席人数：fb.control（60，[Validators.required，Validators.min（0），Validators.max（100）]），
ldo表格填写：fb.控制（''，需要验证器），
ldo_付款：fb.控制（''，需要验证器），
}, {
验证器：customRangeValidator
});

以下是自定义验证程序：

导出函数customRangeValidator（组：FormGroup）{
const date1=group.controls.ldo_form_fill_up；
const date2=group.controls.ldo_付款；
const attd1=group.controls.allowed_考勤；
const attd2=组.controls.U出勤率；
如果（date1.value>=date2.value）{
date2.setErrors({
customRangeValidator:true
});
}
如果（attd2.value>=attd1.value）{
attd2.setErrors({
customRangeValidator:true
});
}
返回null；
}

我需要的：

罚款考勤

和

ldo\u payment>ldo\u表单填写

发生了什么：

在

允许的考勤中输入
70

在

考勤中输入
60

考勤无错误（正常）

将

允许的考勤

更改为

50

对于

考勤显示错误（也可以）

再次将

allowed_考勤

更改为

70

错误仍然显示（不正常）

但是清除并重新输入

60

中的

fined\u Attention

，错误消失了

---

因此，我面临着

步骤7所示的问题。我做错了什么？
我认为您只关心设置错误，而不关心清除错误

在else条件下，还应清除它们。以下是方法：

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>


值必须为0-100
此值必须小于允许的出席人数
必须提供有效日期
此日期必须大于上述日期


主要的，重要的


这是给你的裁判的一封信

谢谢你做这个，帮了我很多。这是一个伟大的小于大于验证在打字脚本，感谢它