I have implemented the most recent version of Angular and Angular Material. I am facing an issue with a datepicker where the validation requirements are not being met as expected. The documentation states that the required attribute should work by default, but it doesn't seem to handle errors in the same way as other form elements.
Here is the code snippet I'm using:
<mat-form-field class="full-width">
<input matInput [matDatepicker]="dob" placeholder="Date of birth" [(ngModel)]="myService.request.dob" #dob="ngModel" required app-validateAdult>
<mat-datepicker-toggle matSuffix [for]="dob"></mat-datepicker-toggle>
<mat-datepicker #dob></mat-datepicker>
<mat-error *ngIf="dob.errors && dob.errors.required">Your date of birth is required</mat-error>
</mat-form-field>
The validation works when a date is selected, and it gets stored correctly in the property within myService.
However, the validation behavior does not align with my expectations. Even though the input field turns red when left empty, the usual error handling for validation errors does not kick in. This results in the error message not displaying, unlike with other input fields on the page:
<mat-error *ngIf="dob.errors && dob.errors.required">Your date of birth is required</mat-error>
The *ngIf condition is never met because the datepicker fails to update dob.errors, hence preventing the error message from showing despite the input being styled as invalid.
Does this sound right? Am I overlooking something?
I attempted to implement a custom directive to validate if the selected date indicates the user is over 18 years old:
export class AdultValidator implements Validator {
constructor(
@Attribute('app-validateAdult') public validateAdult: string
) { }
validate(control: AbstractControl): { [key: string]: any } {
const dob = control.value;
const today = moment().startOf('day');
const delta = today.diff(dob, 'years', false);
if (delta <= 18) {
return {
validateAdult: {
'requiredAge': '18+',
'currentAge': delta
}
};
}
return null;
}
}
In this scenario, I tried to link a similar matError to dob.errors.validateAdult to display the error when necessary.
An intriguing aspect is that if I choose a date less than 18 years ago, the entire input, label, etc., receives the default red error styling, indicating some level of progress. However, the error message remains elusive.
Any help or suggestions would be greatly appreciated!
Specifications:
Angular CLI: 1.6.3
Node: 6.11.0
OS: win32 x64
Angular: 5.1.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
@angular/cdk: 5.0.4
@angular/cli: 1.6.3
@angular/flex-layout: 2.0.0-beta.12
@angular/material-moment-adapter: 5.0.4
@angular/material: 5.0.4
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.3
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.4.2
webpack: 3.10.0