Angular Forms In Depth

src/app/create-course/create-course-step-2/create-course-step-2.component.html

@@ -27,6 +27,9 @@
 
         </mat-date-range-input>
 
+        <mat-error *ngIf="form.errors?.promoPeriod && form.dirty">
+            The start date must be before the end date.</mat-error>
+
         <mat-datepicker-toggle matSuffix [for]="promoPicker"></mat-datepicker-toggle>
 
         <mat-date-range-picker #promoPicker></mat-date-range-picker>

src/app/create-course/create-course-step-2/create-course-step-2.component.ts

@@ -1,5 +1,6 @@
 import {Component, OnInit} from '@angular/core';
 import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+import {createPromoRangeValidator} from '../../validators/date-range.validator';
 
 
 @Component({
@@ -19,6 +20,9 @@ export class CreateCourseStep2Component implements OnInit {
         ]],
         promoStartAt: [null],
         promoEndAt: [null]
+    }, {
+        validators: [createPromoRangeValidator()],
+        updateOn: 'blur'
     });
 
     constructor(private fb: FormBuilder) {

src/app/validators/date-range.validator.ts

@@ -0,0 +1,19 @@
+import {FormGroup, ValidatorFn, Validators} from '@angular/forms';
+
+
+export function createPromoRangeValidator(): ValidatorFn {
+    return (form: FormGroup): Validators | null => {
+
+        const start:Date = form.get("promoStartAt").value;
+
+        const end:Date = form.get("promoEndAt").value;
+
+        if (start && end) {
+            const isRangeValid = (end.getTime() - start.getTime() > 0);
+
+            return isRangeValid ? null : {promoPeriod:true};
+        }
+
+        return null;
+    }
+}