Question

我的角度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']));
    }
  }

编辑：Gunter是对的：验证器确实在值更改时返回错误对象。问题出在其他地方：它在addressFormErrors方法中没有返回true - 可能是由于属性路径规范中的一些错误。

有人可以帮忙吗？

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方法，我将不胜感激。

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

1 个答案: