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

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

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

首先，在组件的模板文件中，确保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>

在组件的代码中，获取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()方法，以实现更复杂的逻辑。

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