Существует два ввода даты: d1 и d2.
Требование d2 должно быть больше или равно d1.
По умолчанию минимальная дата d2 равна 2018-09-03,который хранится в переменной minDate .
[Хороший случай] Если пользователь сначала вводит d1,
вызывает функцию onChange и обновление minDate до значения d1.В этом случае, если пользователь хочет обновить d2, все даты до minDate отключены.
[Плохой случай] Если пользователь сначала вводит d2,
и ввод d1 позже с помощью d1> d2, я хочу, чтобы программа отображала сообщение об ошибке с помощью функции проверки урегулирования * Validate .Однако minDate , переданный в resolledateValidator , не обновляется (по-прежнему равно значению по умолчанию 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;
}
}