Validation working both at rangeInputComponent and numberRangeFilterComponent

Author: christophscheuing

src/app/core/basic-datatypes/number/number-range-filter/number-range-filter.component.html

@@ -1,4 +1,7 @@
 <mat-form-field>
   <mat-label>{{ filterConfig.label || filterConfig.name }}</mat-label>
-  <app-range-input [formControl]="formControl"></app-range-input>
+  <app-range-input
+    [formControl]="formControl"
+    [deactivateValidation]="false"
+  ></app-range-input>
 </mat-form-field>

src/app/core/basic-datatypes/number/number-range-filter/number-range-filter.component.ts

@@ -1,7 +1,12 @@
 import { Component, Input } from "@angular/core";
 import { Entity } from "../../../entity/model/entity";
 import { MatFormFieldModule } from "@angular/material/form-field";
-import { FormControl, ReactiveFormsModule } from "@angular/forms";
+import {
+  FormControl,
+  ReactiveFormsModule,
+  ValidationErrors,
+  ValidatorFn,
+} from "@angular/forms";
 import {
   NumericRange,
   RangeInputComponent,
@@ -20,11 +25,26 @@ export class NumberRangeFilterComponent<T extends Entity> {
 
   formControl: FormControl<NumericRange>;
 
+  private validatorFunction: ValidatorFn = (): ValidationErrors | null => {
+    if (
+      this.formControl.value.from &&
+      this.formControl.value.to &&
+      this.formControl.value.from === this.formControl.value.to
+    ) {
+      return {
+        sameValue: "The from value is the same as the to value.",
+      };
+    } else {
+      return null;
+    }
+  };
+
   constructor() {
     this.formControl = new FormControl<NumericRange>({ from: 0, to: 1 });
+    this.formControl.addValidators([this.validatorFunction]);
 
     this.formControl.valueChanges.subscribe((value) => {
-      console.log("external value changes", value);
+      console.log(this.formControl.valid, this.formControl.errors);
     });
   }
 }

src/app/core/basic-datatypes/number/number-range-filter/range-input/range-input.component.ts

@@ -1,11 +1,14 @@
 import { Component, ElementRef, Input, Optional, Self } from "@angular/core";
 import {
   FormControl,
+  FormControlDirective,
   FormGroup,
   FormGroupDirective,
   NgControl,
   NgForm,
   ReactiveFormsModule,
+  ValidationErrors,
+  ValidatorFn,
 } from "@angular/forms";
 import { ErrorStateMatcher } from "@angular/material/core";
 import { MatFormFieldControl } from "@angular/material/form-field";
@@ -27,6 +30,7 @@ export class RangeInputComponent extends CustomFormControlDirective<NumericRange
     from: new FormControl(),
     to: new FormControl(),
   });
+  formControlDirective: FormControlDirective;
 
   @Input() set value(value: NumericRange) {
     // update the internal formGroup when the value changes from the outside
@@ -37,12 +41,16 @@ export class RangeInputComponent extends CustomFormControlDirective<NumericRange
     return super.value;
   }
 
+  @Input()
+  deactivateValidation: boolean = false;
+
   constructor(
     elementRef: ElementRef<HTMLElement>,
     errorStateMatcher: ErrorStateMatcher,
     @Optional() @Self() ngControl: NgControl,
     @Optional() parentForm: NgForm,
     @Optional() parentFormGroup: FormGroupDirective,
+    @Optional() formControlDirective: FormControlDirective,
   ) {
     super(
       elementRef,
@@ -52,11 +60,27 @@ export class RangeInputComponent extends CustomFormControlDirective<NumericRange
       parentFormGroup,
     );
 
+    this.formControlDirective = formControlDirective;
     this.formGroup.valueChanges.subscribe((value) => {
       this.value = value;
-      console.log("internal value changes", this.value);
     });
   }
+
+  private validatorFunction: ValidatorFn = (): ValidationErrors | null => {
+    if (this.value.from && this.value.to && this.value.from > this.value.to) {
+      return {
+        fromGreaterThanTo: "The from value is greater than the to value.",
+      };
+    } else {
+      return null;
+    }
+  };
+
+  ngAfterViewInit() {
+    if (!this.deactivateValidation) {
+      this.formControlDirective.form.addValidators([this.validatorFunction]);
+    }
+  }
 }
 
 export class NumericRange {