angular - PrimeNG 日历表单组验证问题

Question

我正在尝试向我的表单添加验证。

discount字段不能为空，值范围需要在0到100之间，time_from和time_to不能为空。我无法在 time_from 和 time_to 上触发验证过程。我使用 PrimeNG 日历组件。我发现 p-calendar 验证与 ngModule 配合得很好，但我找不到任何表单组的解决方案。

组件(简化)

ngOnInit() {
    this.buildForm();
  }

  buildForm(): void {
    this.discountFG = this.fb.group({
      discount: new FormControl('', [Validators.required, CustomValidators.range([0, 100])]),
      time_from: new FormControl('', Validators.required),
      time_to: new FormControl('', Validators.required)
    });

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

  onValueChanged(data?: any) {
    if (!this.discountFG) { return; }
    const form = this.discountFG;

    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] + ' ';
        }
      }
    }
  }

模板(简化)

          <p-calendar formControlname="time_from" [locale]="pl" dateFormat="yy-mm-dd" [monthNavigator]="true" [yearNavigator]="true"
            yearRange="2010:2030" (blur)="setTimeFrom($event)" readonlyInput="true" required></p-calendar>

          <p-calendar formControlname="time_to" [locale]="pl" dateFormat="yy-mm-dd" [monthNavigator]="true" [yearNavigator]="true"
            yearRange="2010:2030" [minDate]="minDate" readonlyInput="true" required></p-calendar>

当前行为

验证器不会注意到是否选择了日期，因此，不会触发任何事件来捕获值更改，这意味着 onValueChanged 认为 time_from 和 time_to 未受影响。

我该如何解决这个问题？

Answer 1

经过一些广泛的调试，我发现表单由于语法错误而无法验证:(，您将 formControlName 拼写为小写 n。至少，这是您发布的代码就是这种情况。因此，表单控件永远无法获取值。

我在 Plunk 中修复了它并尝试了，它开始工作。

html:

<form (ngSubmit)="onSubmit()" [formGroup]="discountFG" class="box-model form-support-margin">
  <p-calendar formControlName="time_from" dateFormat="yy-mm-dd" [monthNavigator]="true" [yearNavigator]="true"
            yearRange="2010:2030" (blur)="setTimeFrom($event)" readonlyInput="true">

  </p-calendar>

          <p-calendar formControlName="time_to" dateFormat="yy-mm-dd" [monthNavigator]="true" [yearNavigator]="true"
            yearRange="2010:2030" [minDate]="minDate" readonlyInput="true"></p-calendar>
  <p></p>
  <button md-raised-button color="primary" type="submit" [disabled]="!discountFG.valid">Save</button>
</form> 

Plunker Demo