validation 2 date in Angular studyTime

i want to validation 2 date using mat-datepicker Here is my code : file HTML:


                    <mat-form-field >
                        <input matInput  [matDatepicker]="st" formControlName="studyTime"
                            [(ngModel)]="item.studyTime"  placeholder="{{'CertificateDegree.StudyTime' | translate}}">
                        <mat-datepicker-toggle matSuffix [for]="st"></mat-datepicker-toggle>
                        <mat-datepicker #st></mat-datepicker>
                    </mat-form-field>

 <mat-form-field  >
                            <input matInput  [matDatepicker]="gt" formControlName="grantTime"
                                [(ngModel)]="item.grantTime"  placeholder="{{'CertificateDegree.GrantTime' | translate}}"
                                
                                >
                        <mat-datepicker-toggle matSuffix [for]="gt" ></mat-datepicker-toggle>
                        <mat-datepicker #gt ></mat-datepicker>
                        <mat-error *ngIf="error.isError">
                            {{'CertificateDegree.Error.studyForm' | translate}}
                        </mat-error>
                    </mat-form-field>

Here is my ts file:

   @Component....
   export class AddCertificatedegreeCompoment implements OnInit{
...
}
constructor(){
this.formError ={
granTime:{}
studyTime:{}
}
}

  ngOnInit() {
    this.form = this.formBuilder.group({       
        studyTime: new FormControl(this.item.studyTime,Validators.required),
        grantTime: new FormControl(this.item.grantTime,Validators.required),

i want to validate when the user pick the studyTime > grantTime it put the error and cannot save .And it wil have a mat-error warning them they need to pick studyTime < grantTime to save.

CodePudding user response：

you can try this one

 <input matInput  [matDatepicker]="gt" formControlName="grantTime" [max]="studyTime"
                                [(ngModel)]="item.grantTime"  placeholder="{{'CertificateDegree.GrantTime' | translate}}"
                                
                                >

You can add the below logic in typescript

const control = this.customerBasicForm.get("grantTime");
// if studyTime is undefine the use this.form.studyTime  same for grantTime
if(studyTime > grantTime)
{
 control.setErrors({ datevalidation: true });
}

then can show message like below

<input matInput  [matDatepicker]="gt" formControlName="grantTime" [max]="studyTime"
                                [(ngModel)]="item.grantTime"  placeholder="{{'CertificateDegree.GrantTime' | translate}}"
                                
                                >
  <mat-error *ngIf="f.grantTime.hasError('datevalidation')">
                <strong>your validation message</strong>
              </mat-error>

CodePudding user response：

Use cross validation

this.form = this.formBuilder.group({       
  studyTime: new FormControl(this.item.studyTime, Validators.required),
  grantTime: new FormControl(this.item.grantTime, Validators.required),
}, {
  validators: timeValidator
});

export const timeValidator: ValidatorFn = (
  form: AbstractControl
): ValidationErrors | null => {
  const studyTime = form.get('studyTime').value;
  const grantTime = form.get('grantTime').value;

  return new Date(studyTime) >= new Date(grantTime) ? { invalidTime: true } : null;
};

Now your form has invalidTime error.