Как написать функцию валидатора муллипа в одной форме (Реактивные формы) в угловых?

Question

Я использую реактивные формы

Моя форма такая

this.fb.group({
            percentAllocation: [''],
            constantPercent: [''],
            allocStartDate: [''],
            allocEndDate: [''],
                   },  { validator: this.percentageValidator('percentAllocation', 'constantPercent'))

Мне нужно два типа проверки

1) allocStartDate < allocEndDate

2) percentAllocation > constantPercent

Эти две вышеупомянутые проверки зависят от двух форм, управляющих друг другом. Я пытаюсь написать подтверждение, как это

 percentageValidator(rowPercentage, constantPercent) {
    return (group: FormGroup): { [key: string]: any } => {
        let r = group.controls[rowPercentage];
        let c = group.controls[constantPercent]
        if (r.value > c.value) {
            return {
                percentage: true
            };
        }
        return {};
    }
}

dateLessThan(from: string, to: string) {

    console.log(from, to)
    return (group: FormGroup): { [key: string]: any } => {
        let f = group.controls[from];
        let t = group.controls[to];
        if (f.value > t.value) {
            return {
                dates: true
            };
        }
        return {};
    }
}

Пожалуйста, помогите мне поставить несколько для проверки, и сообщение об ошибке должно быть только через форму

Answer 1

Зачем искать сложное решение, когда существует более легкое и лучшее решение?

Я предпочитаю следующий подход для сравнения двух элементов управления в Custom Validator

Компонент

  constructor(private fb: FormBuilder) { }
  public myForm: FormGroup;
  ngOnInit() {
    this.myForm = new FormGroup({
      percentAllocation: new FormControl('21'),
      constantPercent: new FormControl('26', this.percentageValidator),
      allocStartDate: new FormControl('', this.dateLessThan),
      allocEndDate: new FormControl(''),
    })
    this.myForm.statusChanges.subscribe(val => console.log(val))
  }

  percentageValidator(control: FormControl): { [key: string]: boolean } {
    if (control.parent) {
      let c = Number(control.parent.value['percentAllocation']);
      let r = Number(control.value);
      if (r > c) {
        return {
          'percentage': true
        };
      }
      else return null;
    }
  }

  dateLessThan(control: FormControl): { [key: string]: boolean } {
    if (control.parent) {
      let f = control.parent.value['allocEndDate']
      let t = control.value
      if (new Date(f) < new Date(t)) {
        return {
          'dates': true
        };
      }
      else
        return null;
 }
  }
}

HTML

<div class="container">
<form [formGroup]="myForm">
    <div class="form-group">
       <label for="peralloc">percentAllocation</label>
  <input type="text" 
   class="form-control" formControlName="percentAllocation">
    </div>
    <div class="form-group">
       <label for="conper">constantPercent</label>
  <input type="text"  class="form-control" 
  formControlName="constantPercent">
    </div>
    <div class="form-group">
      <label for="allocstart">allocStartDate</label>
  <input type="date"  class="form-control" 
  formControlName="allocStartDate">
    </div>
    <div class="form-group">
        <label for="allocEnd">allocEndDate</label>
 <input  class="form-control" type="date" 
 formControlName="allocEndDate">
    </div>
 <div *ngIf="myForm.get('constantPercent').errors && myForm?.get('constantPercent')?.errors?.percentage">
    ? percentAllocation should be greater than constantPercent
  </div>
  <div *ngIf="myForm.get('allocStartDate').errors && myForm?.get('allocStartDate')?.errors?.date ">
    ? end Date should be greater than start Date
  </div>
</form>
</div>

Добавлен бит начальной загрузки;)

Live Demo