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

}

如何访问validateFunction内部的表单控件我遇到错误

无法读取未定义的属性'filterForm'

Answer 1

我已通过这样的方式进行存档，请关注。它一定会为您工作。这是工作代码。

sample.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>

sample.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
}

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

使用Angular材质日期选择器验证日期

2 个答案: