угловая индивидуальная проверка - входной параметр не изменился - PullRequest
0 голосов
/ 18 сентября 2018

Существует два ввода даты: 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;
  }

}

1 Ответ

0 голосов
/ 18 сентября 2018

Вы валидаторы в инициализировать в конструкторе, и вы передаете "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)]);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...