CORE-UI Angular输入框双向绑定默认添加ng-valid类问题求助

该异常是Angular模板驱动表单默认校验逻辑与CORE-UI表单样式规则共同作用的结果：

• 输入框仅配置name属性未绑定ngModel时，控件不会被注册到NgForm管理的控件树中，不会挂载任何表单校验状态类，表现符合预期
• 输入框添加[(ngModel)]绑定后，控件会被正式注册到表单实例，Angular会立即对绑定的初始值执行校验：如果初始值（通常为undefined/空字符串）未命中任何配置的校验规则（如required/minlength等），会直接标记为校验通过，自动追加ng-valid类，该逻辑与用户是否做过交互无关
• CORE-UI的cFormControl指令默认监听Angular表单控件的状态类渲染样式，因此初始状态就会显示校验通过的视觉效果。

以下三种方案均可解决问题，可根据项目场景选择：

• 方案1：配置校验触发时机+自定义状态类绑定（推荐）
  调整ngModel的校验更新时机为失焦触发，同时绑定状态类判断逻辑，仅在用户完成交互后才追加校验类：

  <input
      cFormControl
      type="text"
      placeholder="Username"
      name="UserName"
      [(ngModel)]="model.UserName"
      [ngModelOptions]="{updateOn: 'blur'}"
      #userNameInput="ngModel"
      [class.ng-valid]="userNameInput.valid && userNameInput.touched"
      [class.ng-invalid]="userNameInput.invalid && userNameInput.touched"
  >
  

  该方案符合常规表单交互逻辑，不会出现用户未输入就提示校验结果的问题。

• 方案2：视图初始化后重置表单状态
  若不想调整模板配置，可在组件视图渲染完成后主动重置表单控件的初始状态，清除自动添加的校验标记：

  import { Component, ViewChild, AfterViewInit } from '@angular/core';
  import { NgForm } from '@angular/forms';
  
  @Component({
    // 组件元配置
  })
  export class LoginComponent implements AfterViewInit {
    @ViewChild('loginForm') loginForm!: NgForm;
    model = { UserName: '' };
  
    ngAfterViewInit(): void {
      // 延时触发避免变更检测报错
      setTimeout(() => {
        Object.values(this.loginForm.controls).forEach(control => {
          control.markAsPristine();
          control.markAsUntouched();
          control.setErrors(null);
        });
      });
    }
  
    login() {
      // 登录提交逻辑
    }
  }
  

• 方案3：全局样式覆盖（适合全项目统一调整）
  如果项目中所有表单都需要规避初始校验状态显示问题，可直接在全局样式文件中覆盖默认样式规则，仅在控件被交互后才显示校验样式：

  /* 全局styles.scss/styles.css */
  c-input-group .ng-valid:not(.ng-touched):not(.ng-dirty),
  c-input-group .ng-invalid:not(.ng-touched):not(.ng-dirty) {
    border-color: var(--cui-border-color) !important;
    padding-right: var(--cui-form-padding-x) !important;
    background-image: none !important;
  }
  

  该方案无需修改业务代码，一次配置全项目生效。

注：以上方案同时可解决配置required等校验规则时，输入框初始未交互就显示校验错误样式的同类问题。

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