我的自定义错误inside mat-error没有显示在DOM中
提问于 2020-04-21 20:30:58
我正在尝试验证登录表单并检查电子邮件是否有效(我想阻止一些10分钟的电子邮件)，所以与无效电子邮件模式的mat-errors一起，我想显示电子邮件无效或真实的错误。
我有一个应用程序接口，所以我发送电子邮件到服务器，它返回我的响应，真或假，我试图显示另一个mat-error，而不是默认的，但被卡住了。我读过有关ErrorStateMatchers的文章，但我不知道如何在内部集成我的应用程序接口服务。你能帮我吗?或者给我一些提示。
这是我的html模板：
<mat-form-field class="form-input">
<div class="input-wrapper">
<span class="material-icons">person</span>
<input matInput class="input" type="email" name="email" (blur)="validateEmail()" formControlName="email"
[readonly]="disabledForm">
</div>
<mat-error class="input-error" *ngIf="loginForm.get('email').touched && formErrorsText['email']" translate>
{{ formErrorsText['email'] }}
</mat-error>
<mat-error class="input-error" *ngIf="!(validEmail$ | async)">
{{ 'AUTH.LOGIN.INVALID_EMAIL'| translate }}
</mat-error>
</mat-form-field>基本上如果我替换掉
<mat-error class="input-error" *ngIf="!(validEmail$ | async)">
{{ 'AUTH.LOGIN.INVALID_EMAIL'| translate }}
</mat-error>使用
<div class="input-error" *ngIf="!(validEmail$ | async)">
{{ 'AUTH.LOGIN.INVALID_EMAIL'| translate }}
</div>它已经被展示过了，但是我想知道为什么我不能使用mat-error。
这是我的apiService
validateEmail(): void {
if (this.loginForm.valid) {
this.validEmail$ = this.emailValidationService.checkEmail(this.loginForm.get('email').value)
.pipe(map(response => !response?.trust_rate || response?.trust_rate < 50));
}
}
回答 1
Stack Overflow用户
发布于 2020-04-21 21:06:33
在您的validateEmail()方法中，您可以执行如下操作
validateEmail(): void {
if (this.loginForm.valid) {
this.emailValidationService.checkEmail(this.loginForm.get('email').value)
.subscribe(response => {
//Apply your checks, if invalid then
this.loginForm.get('email').setErrors({serverError: 'Your Error'});
});在你的模板中，
<mat-error *ngIf="form.get('email').errors?.serverError">
{{ form.get('email').errors?.serverError }}
</mat-error>mat-error似乎与它所在的<form-field>的状态有关，因此在表单域上设置错误会正确地标记该域是脏的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61352673
复制相关文章
点击加载更多
腾讯云开发者
