Angular7中点击按钮后mat-error自定义错误mediaUpinNotExist不显示问题

问题修复方案 #

根因说明 #

你遇到的mat-error不显示、表格数据点击按钮后不渲染的问题，核心是异步请求回调内的状态变更没有触发Angular的自动变更检测，导致视图没有同步最新的表单状态和数据。另外你的HTML代码里还存在语法错误，也会影响错误提示的展示。

修复步骤 #

1. 修复HTML语法错误
   你第二个mat-error的*ngIf属性末尾多了一个冗余的双引号，先删除多余引号：

<!-- 修复后代码 -->
<mat-error *ngIf="addTenderLicneseForm.controls['tender_media_upin'].hasError('mediaUpinNotExist') && addTenderLicneseForm.controls['tender_media_upin'].touched">
  Not Found, please recheck or add media first
</mat-error>

2. 手动触发变更检测
   在接口回调中修改表单状态、更新表格数据后，主动触发Angular变更检测同步视图：

• 首先导入并注入ChangeDetectorRef：

import { ChangeDetectorRef } from '@angular/core';

// 构造函数注入
constructor(private cdr: ChangeDetectorRef, /* 你的其他注入项 */) {}

• 在所有修改表单状态、更新表格数据的位置，新增变更检测触发代码：
  比如Upin不存在的分支：

} else if(res.code == 2){//upin不存在
  this.mediaUpinNotExist = true;
  // 先设置错误，再标记为已触碰，顺序不要反
  this.tender_media_upin.setErrors({ mediaUpinNotExist: true })
  this.tender_media_upin.markAsTouched();
  // 新增这行触发视图更新
  this.cdr.detectChanges();
}

同样在Upin存在的成功分支、接口错误回调里设置表单错误的位置，都要加this.cdr.detectChanges()即可。

修改完成后，点击按钮会立即触发错误提示显示和表格数据渲染，不需要再点击输入框。

内容的提问来源于stack exchange，提问作者sangRam