|
function minDateValidator(min: Date, value: Date) {
return (control): { [key: string]: boolean } | null => {
if (+min < +control.value) {
return { minDateValidator: false };
} else {
return { minDateValidator: true };
}
};
}
function maxDateValidator(max: Date, value: Date) {
return (control): { [key: string]: boolean } | null => {
if (+max > +control.value) {
return { maxDateValidator: false };
} else {
return { maxDateValidator: true };
}
};
}
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None,
providers: [MaskedDateTimeService]
})
export class AppComponent {
@ViewChild('dateObj')
public datepickerObject: DatePickerComponent;
min = new Date('8/1/2021');
max = new Date('8/31/2021');
value = new Date('08/19/2022');
dateMask = 'MM/dd/yyyy';
maskPlaceholderValue = 'MM/dd/yyyy';
skillForm: FormGroup;
createForm(): void {
this.skillForm = this.fb.group({
date: [
this.value,
[
minDateValidator(this.min, this.value),
maxDateValidator(this.max, this.value)
]
]
});
}
ngAfterViewInit() {
this.skillForm.controls['date'].updateValueAndValidity();
}
onClick() {
if (this.skillForm.valid) {
console.log('form submitted');
} else {
this.skillForm.controls['date'].updateValueAndValidity();
}
}
} | 
