当日历控件处于无效状态时，PrimeNG日历控件的“活动表单”更新值看不到更新日历UI

Question

我在Angular Reactive Forms应用程序中使用PrimeNG Calendar控件。在我的应用程序中，我在Primefaces对话框中有一个带有日历控件的表单。

当在日历控件中键入无效的日期值时，在关闭对话框时，我会以编程方式将控件的值更新为预定义的回滚日期值，以便再次显示该窗体时，该窗体处于有效状态。

但是，我发现以编程方式更新日历控件的值并不能始终以新值更新UI。

我正在使用FormGroup，并尝试过setValue和patchValue。我也尝试过在日历控件上显式使用setValue和patchValue以及formGroup的重置方法。仍然出现问题。

只是想知道是否有人可以建议我在代码中哪里出错了？

我在http://plnkr.co/edit/xc4ygZ?p=info创建了一个插件，以说明一个例子。角度组件和模板的代码包含在下面。

import {
  Component
} from '@angular/core';
import {
  FormBuilder
} from '@angular/forms';
import {
  FormGroup
} from '@angular/forms';
import {
  OnInit
} from '@angular/core';
import {
  Validators
} from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: 'app/app.template.html'
})


export class AppComponent {

  birthDate: Date;
  form: FormGroup;

  formErrors = {
    'setdate': '',
  };


  validationMessages = {
    'setdate': {
      'required': 'Set date is required.',
      'invalidDate': 'Invalid Date.'
    },
  };


  constructor(private fb: FormBuilder) {

    this.birthDate = new Date();
  }


  ngOnInit(): void {
    this.buildForm();
  }


  onSubmit(): void {

  }


  setSetDate(): void {
    let today = new Date();

    this.form.patchValue({
      setdate: today
    });

  }


  private buildForm(): void {
    this.form = this.fb.group({
      setdate: [this.birthDate, [Validators.required]]
    });

    this.form.valueChanges
      .subscribe(data => this.onValueChanged(data));
    //this.onValueChanged(); 
  }





  private onValueChanged(data ? : any): void {

    let _self = this;

    if (!this.form) {
      return;
    }
    const form = this.form;

    console.log("onValueChanged()");
    for (const field in this.formErrors) {
      // clear previous error message (if any)
      this.formErrors[field] = '';
      const control = form.get(field);
      if (control && control.dirty && !control.valid) {
        const messages = this.validationMessages[field];
        for (const key in control.errors) {
          this.formErrors[field] += messages[key] + '\n';
        }
      }
    }
  }

}

<p> Enter a date that is invalid, e.g. edf. Then try clicking the button to programmatically reset the date</p>
<p> The UI for the calendar control does not consistently update with the new date. </p>
<form autocomplete="off" [formGroup]="form" novalidate (ngSubmit)="onSubmit()">

  <div class="form-group">
    <label for="setdate" class="control-label col-xs-4">Set Date</label>
    <div>
      <p-calendar #theDate id="setdate" formControlName="setdate" showTime="true" hourFormat="24" dateFormat="dd-mm-yy" [showIcon]="true" placeholder="Set Date" required>

      </p-calendar>
      <p>SetDate Value :: {{ theDate.value }}</p>
      <p>SetDate Valid :: {{ this.form.controls['setdate'].valid }}</p>
      <p>SetDate Errors :: {{ this.form.controls['setdate'].errors | json }}</p>
    </div>

    <div *ngIf="formErrors.setdate" class="alert alert-danger">
      {{ formErrors.setdate }}
    </div>

  </div>
  <button type="button" class="btn" (click)="setSetDate()">Test SetDate</button>
</form>

Answer 1

有两件事导致 Reactive Forms 和 PrimeNG 无法一起运行。

1. 我正在使用this.myForm.reset()它清除 PrimeNG 组件上的必要数据。

   解决方案

   我使用 重置了这些值this.myForm.patchValue({myFormControlName: 'my reset value'})。

   当然，this.myForm.setValue()如果您愿意，也可以使用。

2. 在我的日历上，我已经完成了雅罗斯拉夫管理员在这里描述的事情。本质上我没有传递日期对象。我将 unix 时间戳作为数字类型传递。

   解决方案

   代替：

   const time = 1562162176;
   this.form.controls.calendarField.setValue(time)
   

   做这个：

   const time = new Date(1562162176);
   this.form.controls.calendarField.setValue(time)