2

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

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未受影响。

我怎样才能解决这个问题 ？

4

1 回答 1

2

经过一些广泛的调试后，我发现由于语法错误，表单没有验证:(，你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 演示

于 2017-07-21T15:57:40.390 回答