当然可以触发！你只需要手动调用表单的原生验证方法，同时结合Angular和MDB的表单状态处理，就能实现和表单提交时完全一致的验证提示效果。以下是具体的实现步骤：

步骤1：给表单添加模板引用变量 #

首先在你的表单标签上添加一个模板引用变量（比如#catalogForm），并绑定ngForm指令（因为你用的是模板驱动表单+ngModel）：

<form #catalogForm="ngForm" class="custom-form p-2">
  <!-- 原表单内容保持不变 -->
</form>

步骤2：在组件类中获取表单引用 #

在component.ts中导入ViewChild和NgForm，并通过模板引用变量获取表单实例：

import { Component, ViewChild, NgForm } from '@angular/core';
// 其他导入保持不变

@Component({
  // 组件元数据保持不变
})
export class YourComponentName {
  @ViewChild('catalogForm') catalogForm!: NgForm;

  // 其他属性和方法保持不变

  create() {
    // 接下来修改这个方法
  }
}

步骤3：修改create()方法手动触发验证 #

需要做两件事：触发原生HTML5的验证提示，以及更新MDB表单控件的触摸状态来显示自定义错误文本。修改后的create()方法如下：

create() {
  // 1. 触发原生HTML5验证，弹出浏览器默认的必填提示框
  const nativeFormElement = this.catalogForm.nativeElement;
  nativeFormElement.checkValidity();

  // 2. 标记所有表单控件为"已触摸"，触发MDB的错误样式和自定义错误提示
  this.catalogForm.control.markAllAsTouched();

  // 验证通过后再调用API
  if (this.catalogForm.valid) {
    this.dataService.create(this.dataService.catalog).subscribe(value => {
      console.log(value);
    }, error => {
      console.log(error);
    });
  }
}

为什么这样有效？ #

• checkValidity()是原生HTML表单元素的方法，会遍历所有必填控件，当存在未填的必填项时，会触发浏览器默认的验证提示（和你点击原生提交按钮时的效果一致）。
• markAllAsTouched()是Angular表单的方法，会把所有控件的状态设为touched，而MDB的mdbInputDirective正是基于这个状态来显示data-error中的自定义错误文本和红色边框样式的。

这样修改后，点击外部的"Create Catalog"按钮时，就会和提交表单时一样，先触发验证提示，只有所有必填项都正确填写后，才会调用API提交数据。

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