Angular：如何在submit方法中设置表单控制器的valid布尔值？

Angular 中FormGroup的valid属性是只读的，无法直接赋值修改，必须通过表单的验证状态或错误状态间接控制。以下是两种可行的实现方式：

方法一：通过设置表单自定义错误控制valid状态 #

当 HTTP 请求返回错误时，给表单组添加自定义错误标记，让表单自动变为invalid状态，从而触发按钮禁用：

修改 TypeScript 代码 #

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

export class MyTestComponent implements OnInit {
  testForm!: FormGroup;

  constructor(private httpRequest: HttpRequestService, private formBuilder: FormBuilder) {}

  ngOnInit(): void {
    this.testForm = this.formBuilder.group({
      email: ['', { validators: [Validators.required] }],
      pass: ['', { validators: [Validators.required] }]
    }, { validators: this.testMail('email', 'pass') });
  }

  public testMail(email: string, pass: string): ValidatorFn {
    return (control: AbstractControl): ValidationErrors | null => {
      // 自定义验证逻辑
      return null;
    };
  }

  submit() {
    this.httpRequest.testRest().subscribe({
      next: () => {
        // 请求成功时清除API错误标记，恢复表单正常状态
        this.testForm.setErrors(null);
        // ...其他成功处理逻辑
      },
      error: (err) => {
        // 添加自定义错误，使表单变为invalid
        this.testForm.setErrors({ apiError: true });
        // ...其他错误处理逻辑
      }
    });
  }
}

说明 #

• testForm.setErrors({ apiError: true })会给表单组添加错误标记，此时testForm.valid会变为false，按钮的[disabled]="testForm.valid"绑定会生效（按钮被禁用）。
• 请求成功时调用this.testForm.setErrors(null)清除错误，恢复表单的正常验证状态。

方法二：使用额外变量结合表单状态控制按钮禁用 #

如果不想修改表单本身的验证状态，可以新增变量标记 API 错误，结合原表单状态控制按钮禁用：

修改 TypeScript 代码 #

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

export class MyTestComponent implements OnInit {
  testForm!: FormGroup;
  isApiError = false; // 新增变量标记API请求错误

  constructor(private httpRequest: HttpRequestService, private formBuilder: FormBuilder) {}

  ngOnInit(): void {
    this.testForm = this.formBuilder.group({
      email: ['', { validators: [Validators.required] }],
      pass: ['', { validators: [Validators.required] }]
    }, { validators: this.testMail('email', 'pass') });
  }

  public testMail(email: string, pass: string): ValidatorFn {
    return (control: AbstractControl): ValidationErrors | null => {
      // 自定义验证逻辑
      return null;
    };
  }

  submit() {
    this.isApiError = false; // 请求发起前重置错误状态
    this.httpRequest.testRest().subscribe({
      next: () => {
        // ...其他成功处理逻辑
      },
      error: (err) => {
        this.isApiError = true; // 标记API请求错误
        // ...其他错误处理逻辑
      }
    });
  }
}

修改 HTML 按钮绑定 #

<button [disabled]="testForm.valid || isApiError" type="submit">submit</button>

说明 #

• 通过isApiError变量单独控制 API 错误导致的禁用状态，不干扰表单自身的验证逻辑。
• 请求发起前重置isApiError，避免历史错误状态影响下一次提交。

额外提示 #

原代码中按钮的[disabled]="testForm.valid"绑定逻辑可能不符合常规：通常表单验证通过时（testForm.valid为true）应该启用按钮，禁用按钮应绑定[disabled]="!testForm.valid"。如果这是笔误，建议修正为合理逻辑。

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