Angular响应式表单：如何实现点击按钮时触发表单验证？

步骤1：修改组件类，添加提交状态与处理逻辑 #

更新你的TS代码，新增提交状态标记变量，并编写提交处理方法：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';

@Component({
  // 保留原有组件元数据
})
export class LoginComponent implements OnInit {
  loginForm: any;
  // 标记是否触发过提交操作
  submitted = false;

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.generateForm();
  }

  generateForm() {
    this.loginForm = this.formBuilder.group({
      username: [null, Validators.required],
      password: [null, Validators.required],
    });
  }

  // 提交按钮绑定的处理方法
  onSubmit() {
    this.submitted = true;
    
    // 表单无效时终止后续操作
    if (this.loginForm.invalid) {
      return;
    }

    // 表单有效时执行登录逻辑
    console.log('登录数据', this.loginForm.value);
    // 此处添加登录API调用等业务代码
  }
}

步骤2：更新模板，修改错误触发条件并添加提交按钮 #

调整HTML代码，将错误提示的触发条件从touched替换为submitted，同时添加提交按钮并绑定提交方法：

<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
  <input 
    id="user-name" 
    name="userName" 
    placeholder="Enter Username" 
    formControlName="username" 
    class="form-control" 
  />
  <label class="form-label" for="user-name">Username</label>

  <div 
    class="text-danger" 
    *ngIf="submitted && loginForm.controls['username'].errors?.['required']"
  >
    Please enter the username
  </div>

  <!-- 密码字段同理修改 -->
  <input 
    id="password" 
    name="password" 
    placeholder="Enter Password" 
    formControlName="password" 
    class="form-control" 
    type="password"
  />
  <label class="form-label" for="password">Password</label>

  <div 
    class="text-danger" 
    *ngIf="submitted && loginForm.controls['password'].errors?.['required']"
  >
    Please enter the password
  </div>

  <!-- 提交按钮 -->
  <button type="submit" class="btn btn-primary">Login</button>
</form>

可选优化：提交后标记所有控件为触碰状态 #

如果希望提交后，用户交互输入框时仍保持错误提示状态，可以在onSubmit方法中添加代码手动标记所有控件为已触碰：

onSubmit() {
  this.submitted = true;
  
  // 遍历所有表单控件，标记为已触碰
  Object.values(this.loginForm.controls).forEach(control => {
    control.markAsTouched();
  });

  if (this.loginForm.invalid) {
    return;
  }

  // 登录逻辑...
}

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