fix(Date Value Validators): Propagate valueRequiredValidator to child component (DSP-1188)

projects/dsp-ui/src/lib/viewer/values/date-value/date-input/date-input.component.ts

@@ -1,6 +1,6 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { Component, DoCheck, ElementRef, HostBinding, Input, OnDestroy, Optional, Self } from '@angular/core';
+import { Component, DoCheck, ElementRef, HostBinding, Input, OnDestroy, OnInit, Optional, Self } from '@angular/core';
 import {
     AbstractControl,
     ControlValueAccessor,
@@ -93,7 +93,7 @@ const _MatInputMixinBase: CanUpdateErrorStateCtor & typeof MatInputBase =
     styleUrls: ['./date-input.component.scss'],
     providers: [{ provide: MatFormFieldControl, useExisting: DateInputComponent }]
 })
-export class DateInputComponent extends _MatInputMixinBase implements ControlValueAccessor, MatFormFieldControl<KnoraDate | KnoraPeriod>, DoCheck, CanUpdateErrorState, OnDestroy {
+export class DateInputComponent extends _MatInputMixinBase implements ControlValueAccessor, MatFormFieldControl<KnoraDate | KnoraPeriod>, DoCheck, CanUpdateErrorState, OnDestroy, OnInit {
 
     static nextId = 0;
 
@@ -110,6 +110,8 @@ export class DateInputComponent extends _MatInputMixinBase implements ControlVal
     endDateControl: FormControl;
     isPeriodControl: FormControl;
 
+    @Input() valueRequiredValidator = true;
+
     onChange = (_: any) => {
     };
     onTouched = () => {
@@ -267,23 +269,14 @@ export class DateInputComponent extends _MatInputMixinBase implements ControlVal
 
         this.endDateControl = new FormControl(null);
         this.isPeriodControl = new FormControl(null);
-        this.startDateControl
-            = new FormControl(
-                null,
-                [
-                    Validators.required,
-                    sameCalendarValidator(this.isPeriodControl, this.endDateControl),
-                    periodStartEndValidator(this.isPeriodControl, this.endDateControl)
-                ]
-            );
+        this.startDateControl = new FormControl(null);
 
         this.form = fb.group({
             dateStart: this.startDateControl,
             dateEnd: this.endDateControl,
             isPeriod: this.isPeriodControl
         });
 
-
         _fm.monitor(_elRef.nativeElement, true).subscribe(origin => {
             this.focused = !!origin;
             this.stateChanges.next();
@@ -294,6 +287,23 @@ export class DateInputComponent extends _MatInputMixinBase implements ControlVal
         }
     }
 
+    ngOnInit() {
+        if (this.valueRequiredValidator) {
+            this.startDateControl.setValidators([
+                Validators.required,
+                sameCalendarValidator(this.isPeriodControl, this.endDateControl),
+                periodStartEndValidator(this.isPeriodControl, this.endDateControl)
+            ]);
+        } else {
+            this.startDateControl.setValidators([
+                sameCalendarValidator(this.isPeriodControl, this.endDateControl),
+                periodStartEndValidator(this.isPeriodControl, this.endDateControl)
+            ]);
+        }
+
+        this.startDateControl.updateValueAndValidity();
+    }
+
     ngDoCheck() {
         if (this.ngControl) {
             this.updateErrorState();

projects/dsp-ui/src/lib/viewer/values/date-value/date-value.component.html

@@ -34,7 +34,7 @@
 
         <mat-form-field class="large-field child-value-component" floatLabel="never">
 
-            <dsp-date-input #dateInput [formControlName]="'value'" class="value" [errorStateMatcher]="matcher"></dsp-date-input>
+            <dsp-date-input #dateInput [formControlName]="'value'" class="value" [errorStateMatcher]="matcher" [valueRequiredValidator]="valueRequiredValidator"></dsp-date-input>
 
             <mat-error *ngIf="valueFormControl.hasError('valueNotChanged')">
                 <span class="custom-error-message">New value must be different than the current value.</span>

projects/dsp-ui/src/lib/viewer/values/date-value/date-value.component.spec.ts

@@ -36,6 +36,7 @@ class TestDateInputComponent implements ControlValueAccessor, MatFormFieldContro
   @Input() required: boolean;
   @Input() shouldLabelFloat: boolean;
   @Input() errorStateMatcher: ErrorStateMatcher;
+  @Input() valueRequiredValidator = true;
 
   errorState = false;
   focused = false;
@@ -116,6 +117,26 @@ class TestHostCreateValueComponent implements OnInit {
   }
 }
 
+/**
+ * Test host component to simulate parent component.
+ */
+@Component({
+    template: `
+      <dsp-date-value #inputVal [mode]="mode" [valueRequiredValidator]="false"></dsp-date-value>`
+  })
+  class TestHostCreateValueNoValueRequiredComponent implements OnInit {
+
+    @ViewChild('inputVal') inputValueComponent: DateValueComponent;
+
+    mode: 'read' | 'update' | 'create' | 'search';
+
+    ngOnInit() {
+
+      this.mode = 'create';
+
+    }
+  }
+
 describe('DateValueComponent', () => {
 
   beforeEach(async(() => {
@@ -130,6 +151,7 @@ describe('DateValueComponent', () => {
         TestDateInputComponent,
         TestHostDisplayValueComponent,
         TestHostCreateValueComponent,
+        TestHostCreateValueNoValueRequiredComponent,
         KnoraDatePipe
       ]
     })
@@ -611,5 +633,24 @@ describe('DateValueComponent', () => {
 
   });
 
+  describe('create a date value no required value', () => {
+
+    let testHostComponent: TestHostCreateValueNoValueRequiredComponent;
+    let testHostFixture: ComponentFixture<TestHostCreateValueNoValueRequiredComponent>;
+
+    beforeEach(() => {
+      testHostFixture = TestBed.createComponent(TestHostCreateValueNoValueRequiredComponent);
+      testHostComponent = testHostFixture.componentInstance;
+      testHostFixture.detectChanges();
+
+      expect(testHostComponent).toBeTruthy();
+      expect(testHostComponent.inputValueComponent).toBeTruthy();
+    });
+
+    it('should not create an empty value', () => {
+        expect(testHostComponent.inputValueComponent.getNewValue()).toEqual(false);
+    });
+
+  });
 
 });

projects/dsp-ui/src/lib/viewer/values/int-value/int-value.component.spec.ts

@@ -335,8 +335,8 @@ describe('IntValueComponent', () => {
     });
 
     describe('create value no required value', () => {
-        let testHostComponent: TestHostCreateValueComponent;
-        let testHostFixture: ComponentFixture<TestHostCreateValueComponent>;
+        let testHostComponent: TestHostCreateValueNoValueRequiredComponent;
+        let testHostFixture: ComponentFixture<TestHostCreateValueNoValueRequiredComponent>;
 
         beforeEach(async () => {
             testHostFixture = TestBed.createComponent(TestHostCreateValueNoValueRequiredComponent);