Angular 7如何手动触发mat-error？

在Angular 7中，可以通过使用FormControl的markAsTouched()方法来手动触发mat-error。markAsTouched()方法将FormControl标记为已触摸，这将导致表单控件的验证状态发生变化，并触发mat-error的显示。

以下是手动触发mat-error的步骤：

1. 首先，在组件的模板文件中，确保FormControl与mat-error绑定。例如，假设有一个名为"myFormControl"的FormControl和一个mat-error，可以这样绑定：

<mat-form-field>
  <input matInput [formControl]="myFormControl">
  <mat-error *ngIf="myFormControl.invalid && myFormControl.touched">
    错误消息
  </mat-error>
</mat-form-field>

1. 在组件的代码中，获取FormControl的引用，并在需要的时候调用markAsTouched()方法。例如，在某个按钮的点击事件处理程序中触发mat-error，可以这样做：

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  myFormControl: FormControl = new FormControl();

  triggerMatError() {
    this.myFormControl.markAsTouched();
  }
}

在上面的代码中，triggerMatError()方法会调用markAsTouched()方法来手动触发mat-error的显示。可以将该方法与某个按钮的点击事件绑定，以便在点击按钮时触发mat-error。

这是一个简单的示例，展示了如何手动触发mat-error。根据具体的业务需求，可能需要在其他地方调用markAsTouched()方法，以实现更复杂的逻辑。

腾讯云相关产品和产品介绍链接地址：

• 腾讯云官网：https://cloud.tencent.com/
• 云服务器CVM：https://cloud.tencent.com/product/cvm
• 云数据库MySQL：https://cloud.tencent.com/product/cdb_mysql
• 云原生容器服务TKE：https://cloud.tencent.com/product/tke
• 人工智能AI：https://cloud.tencent.com/product/ai
• 物联网IoT Hub：https://cloud.tencent.com/product/iothub
• 移动开发移动推送：https://cloud.tencent.com/product/umeng_push
• 云存储COS：https://cloud.tencent.com/product/cos
• 区块链BaaS：https://cloud.tencent.com/product/baas
• 元宇宙：https://cloud.tencent.com/product/mu