在 primeng p-calendar 中的自定义验证器中未获取 ngModel 的更新值

Question

我正在尝试使用带有这样的图标的

p-calendar

                 <p-calendar 
                        [showOnFocus]="false"
                        [locale]="sw"
                        dateFormat="yy-mm-dd"
                        [style]="{'width': '120px'}"
                        [showIcon]="true"
                        [(ngModel)]="abc.efg.fromDate"
                        [check]="checkDate()"

                        [keepMessage]="true"
                        [keepInvalid]="true"
                        (onSelect)="dateOnSelect($event)"
                        alwaysShow></p-calendar>

应用程序组件中 checkDate() 的实现如下所示

checkDate(): ValidatorFn {
    return (control: AbstractControl): { [key: string]: any } => {
      console.log('date from : ', this.abc.efg.fromDate);
      // other implementation
              }
      }

我面临的问题是，每当我选择一个日期（通过单击图标）时，我都会在 checkDate() 中接到电话，并且

this.abc.efg.fromDate

的值始终为

null

，但我得到

 的值函数中的 this.abc.efg.fromDate

dateOnSelect($event)

 setDateOnSelect(event): void {
    console.log('new date from: ', this.abc.efg.fromDate);
  }

我该如何解决这个问题？

编辑：除了直接将值传递给函数之外，我还能在验证器上做些什么吗？ ？

PS：

this.abc.efg.fromDate

是日期字段。

Answer 1

要解决此问题，您可以使用“ngModelChange”。这直接捕获变化并返回值。

<p-calendar 
  [showOnFocus]="false"
  [locale]="sw"
  dateFormat="yy-mm-dd"
  [style]="{'width': '120px'}"
  [showIcon]="true"
  [(ngModel)]="abc.efg.fromDate"
  [keepMessage]="true"
  [keepInvalid]="true"
  (onSelect)="dateOnSelect($event)"
  (ngModelChange)="checkDate($event)"
  alwaysShow>
</p-calendar>

在 ts 文件中创建一个函数。

checkDate(newDate: any){
  console.log(newDate);
}

希望这有效并解决您的问题。