使用角度材料日期选取器验证日期

Question

在弹出的角度材料对话框中，我想比较两个日期，如果开始日期小于到日期，我将使用

我尝试了以下内容

<div class="col">
<mat-form-field>
<mat-label>Last updated Date From</mat-label>
<input matInput [matDatepicker]="updateFromPicker" formControlName="fromUpdatedDateTime">
<mat-datepicker-toggle matSuffix [for]="updateFromPicker"></mat-datepicker-toggle>
<mat-datepicker #updateFromPicker></mat-datepicker>
</mat-form-field>
</div>
<div class="col">
<mat-form-field>
<mat-label>Last updated Date To</mat-label>
<input matInput [matDatepicker]="updateToPicker" formControlName="toUpdatedDateTime" >
<mat-datepicker-toggle matSuffix [for]="updateToPicker"></mat-datepicker-toggle>
<mat-datepicker #updateToPicker></mat-datepicker>
</mat-form-field>
<mat-error *ngIf="filterForm.controls['toUpdatedDateTime'].hasError('incorrect')">To date can not be less than From date</mat-error>
</div>

和在我的组件文件中

private intiform() {
this.filterForm = this.formBuilder.group({
selectOnMemberBehalf: [this.transactionFilter.selectOnMemberBehalf],
memberCode: [this.transactionFilter.memberCode],
isPayer: [this.transactionFilter.isPayer],
isPayee: [this.transactionFilter.isPayee],
rtgsReference: [this.transactionFilter.rtgsReference],
counterPartyCode: [this.transactionFilter.counterPartyCode],
transactionStatus: [this.transactionFilter.transactionStatus],
valueDate: [this.transactionFilter.valueDate],
transactionType: [this.transactionFilter.transactionType],
queueStatus: [this.transactionFilter.queueStatus],
fromReceivedDateTime: [this.transactionFilter.fromReceivedDateTime],
toReceivedDateTime: [this.transactionFilter.toReceivedDateTime],
***fromUpdatedDateTime: [this.transactionFilter.fromUpdatedDateTime],
toUpdatedDateTime: [this.transactionFilter.toUpdatedDateTime,[Validators.required,this.validateToDate]],***
payerReference: [this.transactionFilter.payerReference],
amountFrom: [this.transactionFilter.amountFrom],
amountTo: [this.transactionFilter.amountTo]
});
}
validateToDate() {
//How to read form controls here?
//this.filterForm.controls['fromUpdatedDateTime'].setErrors({'incorrect': true});

}

如何访问验证函数中的表单控件 我收到错误

无法读取未定义的属性"过滤器窗体">

Answer 1

我已经这样使用存档了，请关注。它肯定会为你工作。这是工作代码。

样品.html

<div class="row" [formGroup]="filterForm">
<div class="col">
<mat-form-field>
<mat-label>Last updated Date From</mat-label>
<input matInput [matDatepicker]="updateFromPicker" formControlName="fromUpdatedDateTime">
<mat-datepicker-toggle matSuffix [for]="updateFromPicker"></mat-datepicker-toggle>
<mat-datepicker #updateFromPicker></mat-datepicker>
</mat-form-field>
</div>
<div class="col">
<mat-form-field>
<mat-label>Last updated Date To</mat-label>
<input matInput [matDatepicker]="updateToPicker" formControlName="toUpdatedDateTime" >
<mat-datepicker-toggle matSuffix [for]="updateToPicker"></mat-datepicker-toggle>
<mat-datepicker #updateToPicker></mat-datepicker>
</mat-form-field>
<mat-error *ngIf="filterForm.errors?.range && filterForm.touched">To date can not be less than From date</mat-error>
</div>

样本.ts

...
import {FormBuilder, FormGroup, ValidatorFn, Validators} from '@angular/forms';
const MyAwesomeRangeValidator: ValidatorFn = (fg: FormGroup) => {
const start = fg.get('fromUpdatedDateTime').value;
const end = fg.get('toUpdatedDateTime').value;
return start !== null && end !== null && start < end ? null : { range: true };
};
@Component({
...
export class SampleComponent{
filterForm: FormGroup;
constructor(private fb: FormBuilder) {
this.intiForm();
}
intiForm() {
this.filterForm = this.fb.group({
fromUpdatedDateTime: ['', Validators.required],
toUpdatedDateTime: ['', Validators.required],
}, {validator: MyAwesomeRangeValidator});
}
}

Answer 2

在函数validateToDate中，您将获得类型为AbstractControl的注入参数。使用它来访问表单字段及其值。

validateToDate(control: AbstractControl){
console.log(control); //do this to check the attributes
}

如果在组上应用自定义验证器，则将在验证器中获得该组下定义的所有表单控件。