DateFormat
The DateFormat rule confirms that a field holds a genuinely valid date, whether it arrives as a JavaScript Date object or as a date string — useful anywhere a form collects a date of birth, appointment time, or shipping date and you need to reject nonsense input like '31-02-2024' or a garbled string before it ever reaches your business logic. When the value is a string, it's parsed using the DD-MM-YYYY format by default, so a value like 05-08-2026 is read as 5 August 2026 rather than May 8th.
#Directive Code Snippet
<!DOCTYPE html>
<html lang="en">
...
<form (ngSubmit)="onSubmit(form)" #form="ngForm">
<input [dateFormat]="<DATE_FORMAT>" type="text" name="<name>" [(ngModel)]="<name>" #<name>="ngModel">
<ng-absolute-validator [formInstance]="<name>"></ng-absolute-validator>
</form>
...
</html>
#Chain Rule Code Snippet
<!DOCTYPE html>
<html lang="en">
...
<form (ngSubmit)="onSubmit(form)" #form="ngForm">
<input [Rule]="date_format:<DATE_FORMAT>" type="text" name="<name>" [(ngModel)]="<name>" #<name>="ngModel">
<ng-absolute-validator [formInstance]="<name>"></ng-absolute-validator>
</form>
...
</html>
#Reactive Form Code Snippet
//component.ts
export class ReactiveComponent{
public form !: FormGroup;
constructor(
private fb : FormBuilder,
private rv : ReactiveValidator,
){this.generteForm()}
generteForm(){
this.form = this.fb.group({
<name> : ['',this.rv.map('date_format:<DATE_FORMAT>',<CUSTOM_MESSAGE>)],
})
}
}
//component.html
<!DOCTYPE html>
<html lang="en">
...
<form [formGroup]="form">
<input type="text" name="<name>" formControlName="<name>">
<ng-absolute-validator [formInstance]="form.get(<name>)"></ng-absolute-validator>
</form>
...
</html>