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

Question

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

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

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

[不良情况]如果用户先输入d2，
然后在d1> d2的情况下输入d1，我希望程序通过使用验证函数resolvedateValidator来显示错误消息。 但是，传递给resolvedateValidator的 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;

---

对于更多示例，我通过传递formControl作为示例来做到这一点：（请参见minDateFromControl） https://github.com/xrobert35/asi-ngtools/blob/master/src/validators/asi-validators.ts

并使它像这样工作：

    this.myForm = fb.group({
      from: [null],
      to: [null]
    });

    this.myForm.controls.from.setValidators([Validators.required,
    AsiValidators.maxDateFromControl(this.myForm.controls.to)]);
    this.myForm.controls.to.setValidators([Validators.required,
    AsiValidators.minDateFromControl(this.myForm.controls.from)]);