当自定义验证器 returns 错误对象时 formGroup.hasError 不返回 true 的问题

Question

我的 angular 2 应用程序使用响应式表单。

我在我的组件之一中初始化了以下 FormGroup：

  ngOnInit() {
    ...

    this.addressForm = this.formBuilder.group({
      address: this.formBuilder.control({
        placeId: this.address.placeId,
        description: this.address.description
      }, addressValidator)
    });
  }

这里是 addressValidator 的定义：

import {AbstractControl} from '@angular/forms';

export function addressValidator(control: AbstractControl) {

  const {placeId} = control.value;

  return (placeId !== undefined && placeId !== null && placeId !== '') ? null : {addressValidator: {emptyPlaceId: true}};
}

以下是我尝试检查表单控件 address 是否有误的方法：

  addressFormErrors(error: string) {
    return this.addressForm.hasError(error, ['address', 'addressValidator']);
  }

这是调用 addressFormErrors 方法的模板：

<form [formGroup]="addressForm" (ngSubmit)="updateAddress()" novalidate>
  <div class="form-group" [ngClass]="getFeedbackClasses(addressForm, 'address', submitted)">
    <div class="input-group">
      <input type="text"
         formControlName="address"
         placeholder="{{'ADDRESS_FORM.NEW_ADDRESS' | translate}}"
         [ngbTypeahead]="chooseAddress"
         [inputFormatter]="addressFormatter"
         [resultFormatter]="addressFormatter"
         autocomplete="off"
         class="form-control"
         [ngClass]="formControlStatusClass(addressForm, 'address', submitted)">
    </div>
    <div [hidden]="addressForm.valid || !submitted">
      <div *ngIf="addressFormErrors('emptyPlaceId')" class="form-control-feedback form-control-label">{{'ADDRESS_FORM.ADDRESS_REQUIRED' | translate}}</div>
    </div>
  </div>
  ...
</form>

这是提交表单时调用的方法：

  updateAddress() {
    this.submitted = true;
    if (this.addressForm.valid) {
      const placeId = this.addressForm.controls['address'].value['placeId'];
      this.userAccountService.updateAddress(placeId)
        .subscribe(() => this.router.navigate(['/dashboard/useraccount']));
    }
  }

edit：Gunter 是对的：验证器确实 return 值更改时的错误对象。问题出在其他地方：它在 addressFormErrors 方法中，而不是 return - 可能是由于属性路径规范中的一些错误。

有人可以帮忙吗？

Answer 1

从

更改返回的错误对象

{addressValidator: {emptyPlaceId: true}}

至：

{emptyPlaceId: true}

和来自

的addressFormErrors

  addressFormErrors(error: string) {
    return this.addressForm.hasError(error, ['address', 'addressValidator']);
  }

至：

  addressFormErrors(error: string) {
    return this.addressForm.controls['address'].hasError(error);
  }

已修复。

但是，请注意，这不是一个完全令人满意的解决方案，因为我不再能够在同一个验证器上指定不同的错误类型。

如果有人能解释如何正确使用自定义验证器的 hasError 方法，我将不胜感激。

当自定义验证器 returns 错误对象时 formGroup.hasError 不返回 true 的问题

Issue with formGroup.hasError not returning true when custom validator returns error object

angular2-forms

angular