Angular 当自定义验证器返回错误对象时,formGroup.hasError未返回true出现问题
我的angular 2应用程序使用反应形式 我在我的一个组件中初始化以下Angular 当自定义验证器返回错误对象时,formGroup.hasError未返回true出现问题,angular,angular2-forms,Angular,Angular2 Forms,我的angular 2应用程序使用反应形式 我在我的一个组件中初始化以下FormGroup: ngOnInit() { ... this.addressForm = this.formBuilder.group({ address: this.formBuilder.control({ placeId: this.address.placeId, description: this.address.description
FormGroup
:
ngOnInit() {
...
this.addressForm = this.formBuilder.group({
address: this.formBuilder.control({
placeId: this.address.placeId,
description: this.address.description
}, 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}};
}
下面是我如何检查表单控件,即地址
是否有错误:
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>
编辑:冈特是对的:验证程序确实会在值更改时返回错误对象。问题在别处:它在addressFormErrors
方法中没有返回true-可能是由于属性路径规范中的某些错误
有人能帮忙吗?从更改返回的错误对象
{addressValidator: {emptyPlaceId: true}}
致:
以及来自的addressFormErrors
addressFormErrors(error: string) {
return this.addressForm.hasError(error, ['address', 'addressValidator']);
}
致:
修好了
但是,请注意,这不是一个完全令人满意的解决方案,因为我不再能够在同一个验证器上指定不同的错误类型
如果有人能解释如何在自定义验证器中正确使用hasError方法,我将不胜感激。验证器应该在值更改时执行,而不是在提交时执行。你说得对。问题在别处。我已经编辑了我的帖子。
{emptyPlaceId: true}
addressFormErrors(error: string) {
return this.addressForm.hasError(error, ['address', 'addressValidator']);
}
addressFormErrors(error: string) {
return this.addressForm.controls['address'].hasError(error);
}