Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
refactor (date-value-comp): propagate valueRequiredValidator to child…
… component
  • Loading branch information
mdelez committed Jan 7, 2021
1 parent 3098bfa commit efdd557
Show file tree
Hide file tree
Showing 4 changed files with 66 additions and 15 deletions.
@@ -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,
Expand Down Expand Up @@ -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;

Expand All @@ -110,6 +110,8 @@ export class DateInputComponent extends _MatInputMixinBase implements ControlVal
endDateControl: FormControl;
isPeriodControl: FormControl;

@Input() valueRequiredValidator = true;

onChange = (_: any) => {
};
onTouched = () => {
Expand Down Expand Up @@ -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();
Expand All @@ -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();
Expand Down
Expand Up @@ -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>
Expand Down
Expand Up @@ -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;
Expand Down Expand Up @@ -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(() => {
Expand All @@ -130,6 +151,7 @@ describe('DateValueComponent', () => {
TestDateInputComponent,
TestHostDisplayValueComponent,
TestHostCreateValueComponent,
TestHostCreateValueNoValueRequiredComponent,
KnoraDatePipe
]
})
Expand Down Expand Up @@ -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);
});

});

});
Expand Up @@ -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);
Expand Down

0 comments on commit efdd557

Please sign in to comment.