endDate>角度材质中的startDate [英] endDate > startDate in angular material
问题描述
我正在构建组件（ html ， css ， spec.ts ， ts ）的角度，我一直希望 endDate> startDate 。我已点击此链接 https://material.angular.io/components/datepicker/overview以便进行多个日期选择器。
I am building a component (html, css, spec.ts, ts) in angular in which I always want endDate > startDate. I have followed this link https://material.angular.io/components/datepicker/overview in order make multiple datepickers.
这是我用于startDate和endDate的 html 。
This is the html which I have used for startDate and endDate.
startDate：
<div class="item item-1" fxFlex="50%" fxFlexOrder="1">
<mat-form-field>
<input matInput [matDatepicker]="picker1" placeholder="{{'PORTAL.STARTDATE' | translate}}" type="text" formControlName="startDate" [(ngModel)]="unavailability.startDate" [readonly]="!componentPermission.writePermission">
<mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
<mat-datepicker #picker1></mat-datepicker>
</mat-form-field>
</div>
endDate：
<div class="item item-2" fxFlex="50%" fxFlexOrder="2">
<mat-form-field>
<input matInput [matDatepicker]="picker2" placeholder="{{'PORTAL.ENDDATE' | translate}}" type="text" formControlName="endDate" [(ngModel)]="unavailability.endDate" [readonly]="!componentPermission.writePermission">
<mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
<mat-datepicker #picker2></mat-datepicker>
</mat-form-field>
</div>
我拥有的 validateForm（）代码在 ts 中使用的是：
The validateForm() code which I have used in the ts is:
validateForm() {
this.unavailabilityForm = this.formBuilder.group({
'startDate': [''],
'endDate': ['']
});
}
我很确定我必须对<$ c $进行一些更改c> validateForm（）代码，但我不确定必须进行哪些更改。
I am pretty sure I have to make some changes in the validateForm() code but I am not sure what changes I have to make.
推荐答案
由于您似乎要混合使用反应形式和模板驱动，因此我将完全选择反应形式。在我看来，实施验证也更容易，更清洁。这也意味着，您可以完全删除 ngModel ，这是我强烈建议的，因为它可能导致具有两个绑定（窗体控件和ngModel）的意外问题。 编辑2/2019：幸运的是，自v7起，现在也不允许使用ngModel和反应形式。我认为这很好，因为它被滥用太多了！
Since you seem to be going with a mix of reactive form and template driven, I would choose a reactive form completely. Implementing Validation is also in my opinion easier and cleaner. This also then means, you can drop ngModel altogether, which I would then strongly suggest, since it can cause unexpected issues to have two bindings (form control and ngModel). EDIT 2/2019: ngModel together with reactive forms are now also luckily not allowed since v7. That is in my opinion good, since it was misused way too much!
因此，请构建您的表单并附加一个自定义验证程序。如果您的表单很大，我会将自定义验证器附加到您的日期的嵌套组中，如本例所示，只要表单有任何更改，验证器就会触发，无论日期是什么字段或其他字段。
So build your form and attach a custom validator. In case you have a large form, I would attach the custom validator to a nested group of your dates, as it sits in this example, the validator is firing whenever there is any change in the form, doesn't matter if it's the date fields, or some other field.
constructor(private formBuilder: FormBuilder) {
this.unavailabilityForm = this.formBuilder.group({
startDate: [''],
endDate: ['']
}, {validator: this.checkDates});
}
如果要获取变量不可用的值，您可以在以后使用 patchValue 或 setValue 将值分配给表单控件：
If you are getting your values for variable unavailability at a later stage, you can use patchValue or setValue to assign the values to your form controls:
this.unavailabilityForm.setValue({
startDate: this.unavailability.startDate;
endDate: this.unavailability.endDate;
})
The自定义验证器仅检查结束日期是否晚于开始日期，如果有效则返回 null ，否则返回自定义验证错误：
The custom validator simply checks that the end date is a later date than the startdate and returns null if it is valid, or then a custom validation error:
checkDates(group: FormGroup) {
if(group.controls.endDate.value < group.controls.startDate.value) {
return { notValid:true }
}
return null;
}
然后您可以在模板中显示以下自定义错误：
and then you can display this custom error in template with:
<small *ngIf="unavailabilityForm.hasError('notValid')">Not valid</small>
还要记住在表单标签中标记此表单组：
Also remember to mark this formgroup in your form tag:
<form [formGroup]="unavailabilityForm">
这篇关于endDate>角度材质中的startDate的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
