如何在 Angular 2+ formbuilder 中比较两个字段的值以进行验证

Question

I am learning angular ionic and currently attempting to use the angular forms, FormGroup, and FormBuilder features to validate some form data.

I have four fields that I would like to validate in relation to one another, but I am not sure how to write a validator that can see the value of other fields.

The relevant fields are:

startDate, startTime, endDate, endTime.

Because these are ionic datetime inputs, they are always going to be in "ISO 8601" format. So example values might be:

startDate: "2018-03-28"
startTime: "18:52"

My goal is to validate each of these so that they are valid if the start time and date is before the end time and date. For example all four fields are valid when:

startDate is "2018-03-28",
startTime is "14:30",
endDate is "2018-03-28", and
endTime is "18:00"

And all four fields are invalid when, for example:

startDate is "2018-03-28",
startTime is "14:30",
endDate is "2018-02-24", and
endTime is "23:00"

How can I go about comparing the values of these fields using the angular form features?

Any help would be greatly appreciated!

Answer 1

The solution was to create a sub FormGroup and nest it inside the main FormGroup (with FormBuilder).

The code in my .ts file looked like this:

  this.timingSubForm = new FormGroup({
    startDate: new FormControl('', Validators.compose([Validators.required])),
    startTime: new FormControl('', Validators.compose([Validators.required])),
    endDate: new FormControl('', Validators.compose([Validators.required])),
    endTime: new FormControl('', Validators.compose([Validators.required]))
  },
    (formGroup: FormGroup) => {
      return TimeValidator.validateTimes(formGroup);
    }
  );


  this.createItemForm = formBuilder.group({
    itemTitle:  ['', Validators.compose([Validators.minLength(4),Validators.maxLength(100), Validators.required])],
    itemDescription: ['', Validators.compose([Validators.minLength(10),Validators.maxLength(10000), Validators.required])],
    timingSubForm: this.timingSubForm
  });

And the template file looks like this:

<form [formGroup]="createItemForm">
    .. some input fields ..
    <div formGroupName="timingSubForm">
        .. date specific input fields ..
    </div>
    .. some more input fields ..
</form>

Answer 2

The code in my .ts file looked like this:

 this.form = this.formBuilder.group({
        startDate: [null, [Validators.required, DateTimeCompareValidator.DateCompareWithToday()]],
        endDate: [null, [Validators.required, DateTimeCompareValidator.DateCompareWithToday()]],
        startTime: [null, [Validators.required]],
        endTime: [null, [Validators.required]]

    }, {
        validator: Validators.compose([
            DateTimeCompareValidator.TwoDateCompare('startDate', 'endDate'),
            DateTimeCompareValidator.TimeCompare('startTime', 'endTime')
        ])
    });

And the template file looks like this:

<form [formGroup]="form" (ngSubmit)="onSubmit()" class="form-horizontal">
<div class="form-group row">
    <label class="col-md-2 col-form-label" for="startDate">Batch Start Date</label>
    <div class="col-md-4">
        <input type="text" class="form-control mb-3" placeholder="DD-MM-YYYY" [bsConfig]="{ dateInputFormat: 'DD-MM-YYYY' }" bsDatepicker formControlName="startDate" [ngClass]="{ 'is-invalid': submitted && f.startDate.errors }" [minDate]="minStartDate" />
        <div *ngIf="submitted && f.startDate.errors" class="invalid-feedback">
            <div *ngIf="f.startDate.errors.required">Batch Start Date is required.</div>
            <div *ngIf="f.startDate.errors.dateMinThanToday">Batch Start date should be grater than today.</div>
        </div>
    </div>
    <label class="col-md-2 col-form-label" for="endDate">Batch End Date</label>
    <div class="col-md-4">
        <input type="text" class="form-control mb-3" placeholder="DD-MM-YYYY" [bsConfig]="{ dateInputFormat: 'DD-MM-YYYY' }" [minDate]="f.startDate.value" bsDatepicker formControlName="endDate" [ngClass]="{ 'is-invalid': submitted && f.endDate.errors }" />
        <div *ngIf="submitted && f.endDate.errors" class="invalid-feedback">
            <div *ngIf="f.endDate.errors.required">Batch End Date is required</div>
            <div *ngIf="f.endDate.errors.dateMinThanToday">Batch End date should be grater than today.</div>
            <div *ngIf="f.endDate.errors.dateMinThanField">Batch End date should be grater than start date.</div>
        </div>
    </div>
</div>

<div class="form-group row">
    <label class="col-md-2 col-form-label" for="startTime">Start Time</label>
    <div class="col-md-4">
        <timepicker formControlName="startTime" [ngClass]="{ 'is-invalid': submitted && f.startTime.errors }"></timepicker>
        <div *ngIf="submitted && f.startTime.errors" class="invalid-feedback">
            <div *ngIf="f.startTime.errors.required">Batch Start time is required</div>
        </div>
    </div>
    <label class="col-md-2 col-form-label" for="endTime">End ime</label>
    <div class="col-md-4">
        <timepicker formControlName="endTime" [ngClass]="{ 'is-invalid': submitted && f.endTime.errors }"></timepicker>
        <div *ngIf="submitted && f.endTime.errors" class="invalid-feedback">
            <div *ngIf="f.endTime.errors.required">Batch End time is required</div>
            <div *ngIf="f.endTime.errors.timeMinThanField">Batch End time should be grater than start time.</div>
        </div>
    </div>
</div>

The validator file:

import { AbstractControl, ValidatorFn, Validators } from "@angular/forms";

export class DateTimeCompareValidator {

static DateCompareWithToday(): ValidatorFn {
    return (control: AbstractControl): { [key: string]: boolean } | null => {
        const date1 = new Date();
        const date2 = control.value;
        if ((date1 !== null && date2 !== null) && date1 > date2) {
            //console.log("Today= " + date1 + " and controlDate= " + date2);
            return { dateMinThanToday: true };
        }
        return null;
    };
}

static TwoDateCompare(fromDateField: string, toDateField: string, errorKey: string = null): ValidatorFn {
    return (control: AbstractControl): { [key: string]: boolean } | null => {
        const date1 = control.get(fromDateField).value;
        const date2 = control.get(toDateField).value;
        if ((date1 !== null && date2 !== null) && date1 > date2) {
            //console.log("ControlOneDate= " + date1 + " and ControlTwoDate= " + date2);
            if (errorKey === null) {
                control.get(toDateField).setErrors({ 'dateMinThanField': true });
                return { dateMinThanField: true };
            }
            else {
                control.get(toDateField).setErrors({ errorKey: true });
                return { errorKey: true };
            }
        }
        return null;
    };
}

static TimeCompare(fromTimeField: string, toTimeField: string): ValidatorFn {
    return (control: AbstractControl): { [key: string]: boolean } | null => {
        const time1 = control.get(fromTimeField).value;
        const time2 = control.get(toTimeField).value;
        if ((time1 !== null && time2 !== null) && time1 > time2) {
            console.log("ControlOneTime= " + time1 + " and ControlTwoTime= " + time2);
            control.get(toTimeField).setErrors({ 'timeMinThanField': true });
            return { dateMinThanField: true };
        }
        return null;
    };
}

}