Angular 5 FormGroup验证器web服务结果未触发ngIF hasError
Angular 5 FormGroup验证器web服务结果未触发ngIF hasError
提问于 2019-02-19 23:45:23
我有一个自定义的FormGroup验证器，在从检查displayName是否已在使用的web服务调用返回后，该验证器不能正确更新验证器错误状态。
在下面的代码中，我知道我的html代码正在工作，因为当displayName输入为空时，我的组件的validateDisplayName函数显示“显示名称已经使用”。然后，当您开始键入字母时，web服务将被调用以开始验证第三个字母上的条目-然后消息消失，当我键入与数据库中的一个匹配的displayName时，web服务正确地返回true，但return { displayNameTaken: true };调用不会导致显示错误。
我知道这与web服务返回的承诺有关，但我找不到解决方案。
component.ts
ngOnInit() {
this.dnFormGroup = this.formBuilder.group({
displayName: ['', this.validateDisplayName.bind(this)]
});
}
public validateDisplayName(control: AbstractControl): any {
console.log("RegisterComponent validateDisplayName - ENTRY");
if(control.value.length >= 3) {
return this.authService.validateDisplayName(control.value).then(
(res) => {
console.log("RegisterComponent validateDisplayName - res: " +res);
if(res) {
console.log("RegisterComponent validateDisplayName - displayName already used");
return { displayNameTaken: true };
} else {
console.log("RegisterComponent validateDisplayName - - displayName can be used");
return null;
}
},
(err) => {
console.log("RegisterComponent validateDisplayName - err: " +err);
return { displayNameTaken: true };
});
}
console.log("RegisterComponent validateDisplayName - ############## EXIT");
return { displayNameTaken: true };
}component-service.ts
public validateDisplayName(displayName: string) {
console.log("AuthService validateDisplayName - displayName: " +displayName);
return this.http
.get(environment.server_url +"profile_cont/displaynameexists/" +displayName +"/")
.toPromise()
.then(
(response) => {
const existsBool = response.json();
console.log("AuthService validateDisplayName - existsBool: " +existsBool);
return existsBool;
},
(error) => {
console.log("AuthService validateDisplayName - error: " +error);
return true;
});
}component.html
<form [formGroup]="dnFormGroup">
<fieldset>
<div class="row">
<section class="col col-6">
<label class="input">
<i class="icon-append fa fa-user"></i>
<input formControlName="displayName" type="text" minlength="3" maxlength="10" placeholder="Display name">
<b class="tooltip tooltip-top-right"> <i class="fa fa-user txt-color-teal"></i> Please provide a 3 to 10 char name for site display purposes.</b>
</label>
<div *ngIf="dnFormGroup.get('displayName').hasError && dnFormGroup.get('displayName').hasError('displayNameTaken')">
Display Name is already used
</div>
</section>
</div>
</fieldset>
</form>谢谢，鲍勃
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-02-20 00:07:40
Ansync验证器必须是第三个参数，请尝试：
this.dnFormGroup = this.formBuilder.group({
displayName: ['', null, this.validateDisplayName.bind(this)]
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54770089
复制相关文章
相似问题