Seperated DateRange Inputs

src/app/components/table/table.component.html

@@ -184,6 +184,9 @@
                 (element.newObject && column.required) ||
                 (element.isLockedByMe && column.required)
               "
+              (validityChange)="
+                validityChange(element, column.dataPath, $event)
+              "
               [(from)]="element[column.dataPath + '.from']"
               [(to)]="element[column.dataPath + '.to']"
             ></app-date-range-cell>

src/app/components/tableComponents/date-range-cell/date-range-cell.component.html

@@ -1,25 +1,38 @@
-    <mat-form-field *ngIf="editable || label; else stringValue">
-      <mat-label *ngIf="label">{{label}}</mat-label>
-      <mat-date-range-input [rangePicker]="picker" disabled class="date-range-input">
+<div class="dateRange-wrapper" *ngIf="editable || label; else stringValue" [formGroup]="dateRangeGroup">
+  <mat-label *ngIf="label">{{ label }}</mat-label>
+  <mat-form-field class="date-range-input">
     <input
-          matStartDate
+      matInput
       placeholder="Startdatum"
+      [matDatepicker]="fromPicker"
       [value]="from"
+      disabled
+      formControlName="from"
       (dateChange)="startDateChange($event)"
     />
+    <mat-datepicker-toggle matSuffix [for]="fromPicker"></mat-datepicker-toggle>
+    <mat-datepicker #fromPicker [disabled]="!editable"></mat-datepicker>
+  </mat-form-field>
+  <i class="spacer-string">bis</i>
+  <mat-form-field class="date-range-input">
     <input
-          matEndDate
+      matInput
       placeholder="Enddatum"
+      [matDatepicker]="toPicker"
       [value]="to"
+      disabled
+      formControlName="to"
       (dateChange)="endDateChange($event)"
     />
-      </mat-date-range-input>
-      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
-      <mat-date-range-picker
-        #picker
-        [disabled]="!editable"
-      ></mat-date-range-picker>
+    <button mat-button *ngIf="editable && to" matSuffix mat-icon-button aria-label="Clear" (click)="endDateChange({value: null})">
+      <mat-icon>close</mat-icon>
+    </button>
+    <mat-datepicker-toggle matSuffix [for]="toPicker"></mat-datepicker-toggle>
+    <mat-datepicker #toPicker [disabled]="!editable"></mat-datepicker>
   </mat-form-field>
-    <ng-template #stringValue>
-        <div class="date-string">{{toLocaleDate(from)}} <i>bis</i> {{toLocaleDate(to)}}</div>
-    </ng-template>
+</div>
+<ng-template #stringValue>
+  <div class="date-string">
+    {{ toLocaleDate(from) }} <i>bis</i> {{ toLocaleDate(to) }}
+  </div>
+</ng-template>

src/app/components/tableComponents/date-range-cell/date-range-cell.component.scss

@@ -1,5 +1,9 @@
-.date-range-input {
-    min-width: 11em;
+.dateRange-wrapper {
+    display: flex;
+    align-items: center;
+    .spacer-string {
+        margin: 0 0.5em;
+    }
 }
 .date-string {
     min-width: 10em;

src/app/components/tableComponents/date-range-cell/date-range-cell.component.ts

@@ -12,7 +12,7 @@ import { FormControl, FormGroup, Validators } from '@angular/forms';
 @Component({
   selector: 'app-date-range-cell',
   templateUrl: './date-range-cell.component.html',
-  styleUrls: ['./date-range-cell.component.scss']
+  styleUrls: ['./date-range-cell.component.scss'],
 })
 export class DateRangeCellComponent implements OnInit {
   @Input()
@@ -34,19 +34,58 @@ export class DateRangeCellComponent implements OnInit {
   @Output() validityChange = new EventEmitter<boolean>();
   isValid = true;
 
+  dateRangeGroup: FormGroup;
+
   constructor(private cdr: ChangeDetectorRef, public datepipe: DatePipe) {}
 
   ngOnInit() {
+    this.dateRangeGroup = new FormGroup({
+      from: new FormControl(),
+      to: new FormControl(),
+    });
+    this.dateRangeGroup.controls['from'].markAsTouched();
+    this.dateRangeGroup.controls['to'].markAsTouched();
+
+    if (this.editable) {
+    setTimeout(()=>this.checkIfDateRangeIsValid());
+    }
   }
 
   startDateChange(event): void {
     this.from = this.transformDate(event.value);
     this.fromChange.emit(this.from);
+    this.checkIfDateRangeIsValid();
   }
 
   endDateChange(event) {
     this.to = this.transformDate(event.value);
     this.toChange.emit(this.to);
+    this.checkIfDateRangeIsValid();
+  }
+
+  checkIfDateRangeIsValid() {
+    if (this.required && this.from == null) {
+      this.setRangeError(true);
+      return;
+    }
+    if (this.to == null || this.from == null) {
+      this.setRangeError(false);
+      return;
+    }
+    const isValid = new Date(this.to) >= new Date(this.from);
+    this.setRangeError(!isValid);
+  }
+
+  setRangeError(error: boolean): void {
+    console.log("error", error)
+    this.validityChange.emit(!error);
+    if (error) {
+      this.dateRangeGroup.controls['from'].setErrors({ rangeError: true });
+      this.dateRangeGroup.controls['to'].setErrors({ rangeError: true });
+    } else {
+      this.dateRangeGroup.controls['from'].setErrors(null);
+      this.dateRangeGroup.controls['to'].setErrors(null);
+    }
   }
 
   transformDate(date) {
@@ -54,10 +93,9 @@ export class DateRangeCellComponent implements OnInit {
   }
 
   toLocaleDate(date: string): string {
-    if (date == "") {
-      return "";
+    if (date == '') {
+      return '';
     }
     return new Date(date).toLocaleDateString();
   }
-
 }