使用 Angular 材料日期选择器验证日期答案

【问题标题】：Validate dates using Angular material datepicker使用 Angular 材料日期选择器验证日期
【发布时间】：2020-06-04 13:07:18
【问题描述】：

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

显示错误

我在下面尝试了一些东西

<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});

}

如何访问 validateFunction 中的表单控件我收到错误

无法读取未定义的属性“filterForm”

【问题讨论】：

标签： angular angular-material

【解决方案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});
  }
}

【讨论】：

太棒了！有效。有没有一种方法可以使它成为可以在整个应用程序中重复使用的通用验证谢谢@sibabrat swain
酷，它奏效了。现在让它全球化很容易。只需在MyAwesomeRangeValidator 之前添加一个export 关键字并放入app.component.ts。现在您可以在导入后在任何地方调用它。并且fg.get('fromUpdatedDateTime').value 检查控件是否存在然后检查值。
如果您满意，请接受答案。谢谢

【解决方案2】：

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

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

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

【讨论】：