Angular响应式表单能否不设验证？如何移除自动添加的ng-valid类

首先明确说：完全可以创建不带任何验证规则的Angular响应式表单，你遇到的ng-valid自动添加问题，是Angular表单控件的默认行为导致的——当一个控件没有设置任何验证器时，Angular会默认它处于**有效（valid）**状态，所以会自动给输入框加上ng-valid类。

怎么去掉自动添加的ng-valid类？ #

这里有几种实用的解决方案，你可以根据需求选择：

1. 手动控制表单控件的类（最直接）

通过[ngClass]指令覆盖默认的类绑定，强制不让ng-valid类生效。比如：

<form [formGroup]="myForm">
  <input 
    formControlName="username" 
    [ngClass]="{
      'ng-valid': false,  <!-- 强制禁用ng-valid类 -->
      'ng-dirty': myForm.get('username').dirty,
      'ng-touched': myForm.get('username').touched
    }"
  >
</form>

这样即使控件状态是valid，也不会渲染ng-valid类。

2. 用CSS覆盖ng-valid的样式（最简单）

如果只是不想让ng-valid的样式（比如默认的绿色边框）显示出来，直接在组件样式里重置它的样式即可：

/* 针对当前组件的输入框重置ng-valid样式 */
input.ng-valid {
  border-color: #ced4da !important;  /* 和未交互时的边框颜色一致 */
  box-shadow: none !important;
}

这种方法不需要修改模板逻辑，适合快速解决视觉问题。

3. 自定义表单控件（适合大量需要无验证的场景）

如果你的项目里有很多这类不需要验证的控件，可以创建自定义表单控件，自己管理状态类的添加逻辑。不过这个方案相对复杂，适合需要高度定制的场景。

附：创建无验证表单的示例代码 #

用FormBuilder创建完全不带验证规则的表单很简单，就是不在控件配置里加Validators：

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

@Component({
  selector: 'app-no-validation-form',
  template: `
    <form [formGroup]="myForm">
      <label>用户名：</label>
      <input formControlName="username" [ngClass]="{'ng-valid': false}">
      
      <label>邮箱：</label>
      <input formControlName="email" [ngClass]="{'ng-valid': false}">
    </form>
  `,
  styles: [`
    input {
      margin: 8px 0;
      padding: 6px;
      border: 1px solid #ced4da;
      border-radius: 4px;
    }
    input.ng-dirty, input.ng-touched {
      border-color: #80bdff;
    }
  `]
})
export class NoValidationFormComponent {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    // 这里没有给任何控件添加Validators
    this.myForm = this.fb.group({
      username: [''],
      email: ['']
    });
  }
}

总结一下：无验证规则的表单是完全可行的，ng-valid类的问题是Angular的默认状态机制导致的，通过上面的方法就能轻松解决。

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