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

在“角度材质”对话框弹出窗口中，我希望比较两个日期，如果“起始日期”小于“截止日期”，我将使用

我试过下面的东西

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

}

如何访问validateFunction中的表单控件 我犯了一个错误

---

无法读取函数

validateToDate

中未定义的属性'FilterPerform'。您将得到类型为

AbstractControl

的注入参数。使用它访问表单字段及其值

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

---

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

我已使用这样的方法进行存档，请遵循。这肯定对你有用。这是工作代码

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>

上次更新日期自
上次更新日期至
截止日期不能小于起始日期

样本

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

。。。
从'@angular/forms'导入{FormBuilder，FormGroup，ValidatorFn，Validators}；
const MyAwesomeRangeValidator:ValidatorFn=（fg:FormGroup）=>{
const start=fg.get（'fromUpdateDateTime'）.value；
const end=fg.get（'toUpdatedDateTime'）.value；
返回start！==null&&end！==null&&start

Great！。它成功了。有没有办法让它成为通用验证，可以在整个应用程序中重复使用谢谢@sibabrat swainCool，它成功了。现在让它成为全局验证很简单。只需在

MyAwesomeRangeValidator

前面加一个

export

关键字，然后放在app.component.ts中。现在，你可以在im之后的任何地方调用它移植它。和

fg.get（'fromUpdateDateTime'）。value

检查控件是否存在，然后检查值。如果您满意，请接受答案。谢谢

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