angular - 当日历控件处于无效状态时，PrimeNG 日历控件 Reactive Forms 更新值看不到更新日历 UI

Question

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

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

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

我正在使用 FormGroup 并尝试了 setValue 和 patchValue。我还尝试在日历控件上显式使用 setValue 和 patchValue 以及 formGroup 的重置方法。问题依旧。

只是想知道是否有人可以就我在代码中出错的地方提出建议？

我在 http://plnkr.co/edit/xc4ygZ?p=info 创建了一个 plunker , 举例说明。 Angular 组件和模板的代码包含在下面....

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. 在我的日历上我做了什么Yaroslav Admin描述 here .本质上我没有传递日期对象。我将 unix 时间戳作为数字类型传递。

   解决方案

   代替:

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

   这样做:

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