角度自定义验证 - 输入参数不变

Question

有两个日期输入：d1和d2。 要求是d2必须大于或等于d1。

默认情况下，d2的最小日期是2018-09-03，它存储在minDate变量中。

[好的情况]如果用户先输入d1， 它将触发函数onChange并将minDate更新为d1的值。在这种情况下，如果用户想要更新d2，则禁用minDate之前的所有日期。

[坏情况]如果用户先输入d2， 并且稍后用d1> d2输入d1，我希望程序通过使用验证函数settleateValidator显示错误消息。但是，传递给settateValidator的minDate未更新（仍然等于其默认值2018-09-03而不是d1的值）。

我的问题： 1.为什么minDate在[不好的情况下]没有更新？它在[好的情况]中成功更新。 2.如何解决[一个不好的案例]？

感谢您的帮助！

在.html：

<mat-form-field>
    <input matInput [matDatepicker]="picker_d1" placeholder="d1" [formControl]="d1" (dateChange)="onChange(d1)">
    <mat-datepicker-toggle matSuffix [for]="picker_d1"></mat-datepicker-toggle>
    <mat-datepicker #picker_d1 ></mat-datepicker>
</mat-form-field>

<mat-form-field>
    <input matInput [min]="minDate" [matDatepicker]="picker_d2" placeholder="d2" [formControl]="d2">
    <mat-datepicker-toggle matSuffix [for]="picker_d2" ></mat-datepicker-toggle>
    <mat-datepicker #picker_d2 > </mat-datepicker>
    <mat-hint *ngIf="!myform_fg.controls['d2'].valid"> d2 is smaller than d1 </mat-hint>
</mat-form-field>

在.ts：

function settledateValidator(min: Date): ValidatorFn {
  return (control: AbstractControl): { [key: string]: boolean } => {

    var sd = new Date(control.value);

    console.log(min);  //minDate does not change. it is still equal to its default value.

    if (sd < min){
      return {invalid_toosmall: true};
    }
  };
}

export class MyformComponent implements OnInit {

  minDate = new Date(2018, 8, 3);

  constructor(fb: FormBuilder) {

    this.myform_fg = fb.group({
      'd1': ['', Validators.compose([Validators.required])],
      'd2': ['', Validators.compose([Validators.required, settledateValidator(this.minDate)])],
    });

    this.d1 = this.myform_fg.controls['d1'];
    this.d2 = this.myform_fg.controls['d2'];

  }

  onChange(value: string): void {
    this.minDate = this.d1.value;
  }

}

Answer 1

您在构造函数中初始化验证器，并给出“this.minDate”。当这个改变你改变是参考但验证器仍然有旧的。

我遇到了这种情况，并且做一个你想要做的事情的方法是将一个永远不会改变的对象的引用提供给你的验证器：

//global
const minDateValid = { date : new Date(2018, 8, 3)};

//constructor
settledateValidator(minDateValid);

//on change
this.minDateValid.date = this.d1.value;

---

更多例子，我个人通过传递表单控件为例来做到这一点:(参见minDate FormControl）qazxsw poi

并让它像这样工作：

https://github.com/xrobert35/asi-ngtools/blob/master/src/validators/asi-validators.ts