我有2个日期时间选择器,endDate不能小于startDate
endDateAfterOrEqualValidator(formGroup): any {
var startDateTimestamp: number;
var endDateTimestamp: number;
startDateTimestamp = Date.parse(formGroup.controls['startDateForm'].value);
endDateTimestamp = Date.parse(formGroup.controls['endDateForm'].value);
return (endDateTimestamp < startDateTimestamp) ? { endDateLessthanStartDate: true } : null;
}
在HTML中:
<mat-form-field>
<input matInput name="endDate" id="endDate" formControlName="endDateForm" [(ngModel)]="endDate" [matDatepicker]="toDatePicker"
placeholder="To Date">
<mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
<mat-datepicker disabled="false" #toDatePicker></mat-datepicker>
<mat-error *ngIf="trainingDetail.hasError('endDateLessthanStartDate')">Not valid<mat-error>
</mat-form-field>
如果出现“mat-error”,则不显示该消息.我尝试改变“小”
<small *ngIf="trainingDetail.hasError('endDateLessthanStartDate')">Not valid</small>
信息很好.请告诉我如何使用mat-error
解决方法:
mat-error仅在FormControl无效时显示,但您在表单组上进行了验证.所以在这种情况下你需要使用ErrorStateMatcher
在你的情况下,它看起来像这样:
export class MyErrorStateMatcher implements ErrorStateMatcher {
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
const invalidCtrl = !!(control && control.invalid);
const invalidParent = !!(control && control.parent && control.parent.invalid);
return (invalidCtrl || invalidParent);
}
}
另外值得一提的是,不建议使用两个绑定,即formControl和ngModel.删除ngModel并使用表单控件.如果您稍后收到开始日期和结束日期,则可以使用patchValue(仅设置一些值来形成)或setValue(将所有值设置为表格)
在组件中标记errorstatematcher:
matcher = new MyErrorStateMatcher();
至于您的自定义验证器,您不需要解析日期,只需检查结束日期是否小于开始日期:
checkDates(group: FormGroup) {
if (group.controls.endDate.value < group.controls.startDate.value) {
return { endDateLessthanStartDate: true }
}
return null;
}
<mat-form-field>
<input matInput [matDatepicker]="picker2" type="text" formControlName="endDate" [errorStateMatcher]="matcher">
<mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
<mat-datepicker #picker2></mat-datepicker>
<mat-error *ngIf="myForm.hasError('endDateLessthanStartDate')">End date cannot be earlier than start date</mat-error>
</mat-form-field>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。