Angular：手动将表单标记为已提交状态

Angular里不管是响应式表单还是模板驱动表单，都能通过代码手动把表单标记为已提交状态，具体分两种情况：

一、响应式表单 #

如果你用的是响应式表单，直接调用表单实例的markAsSubmitted()方法就行，还可以搭配markAllAsTouched()触发所有控件的校验提示。

示例代码：

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

@Component({
  selector: 'app-my-form',
  templateUrl: './my-form.component.html',
  styleUrls: ['./my-form.component.css']
})
export class MyFormComponent implements OnInit {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    // 初始化表单
    this.myForm = this.fb.group({
      username: ['', []],
      email: ['', []]
    });
  }

  // 手动标记表单为已提交的方法
  manuallySubmitForm() {
    // 标记表单为已提交
    this.myForm.markAsSubmitted();
    // 可选：标记所有控件为已触碰状态，触发校验提示
    this.myForm.markAllAsTouched();
  }
}

二、模板驱动表单 #

对于模板驱动表单，需要先通过@ViewChild获取NgForm实例，然后有两种方式标记：

方式一：调用onSubmit()方法 #

这个方法会触发表单的submit事件，同时自动把表单标记为已提交状态。

方式二：直接设置submitted属性为true #

这种方式更直接，不会触发submit事件，但同样能标记表单为已提交。

示例代码：
模板部分（my-form.component.html）：

<form #myNgForm="ngForm">
  <input name="username" ngModel required placeholder="用户名">
  <input name="email" ngModel email required placeholder="邮箱">
</form>

组件类部分：

import { Component, ViewChild, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-my-form',
  templateUrl: './my-form.component.html',
  styleUrls: ['./my-form.component.css']
})
export class MyFormComponent implements OnInit {
  @ViewChild('myNgForm') myNgForm: NgForm;

  ngOnInit(): void {}

  manuallySubmitForm() {
    // 方式一：触发submit事件并标记为已提交
    this.myNgForm.onSubmit(undefined);

    // 方式二：直接标记为已提交（不触发submit事件）
    // this.myNgForm.submitted = true;

    // 可选：触发所有控件的校验提示
    // this.myNgForm.control.markAllAsTouched();
  }
}

补充说明 #

标记完成后，表单的submitted属性会变为true，你可以在模板里用这个属性控制错误提示的显示，比如：

<div *ngIf="myForm.submitted && myForm.get('username').invalid">
  用户名不能为空
</div>

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