ANGULAR - 如何根据输入长度动态禁用验证类（PrimeNG验证问题）

最优解决方案 #

你当前是把ng-invalid、ng-dirty硬编码到元素class里了，这两个类本身是Angular表单模块自动维护的状态类，最优方案是使用Angular原生的模板驱动表单验证规则，让框架自动控制这两个类的显隐，无需手动干预，同时也能和PrimeNG组件的默认样式完美适配。

步骤1：确保模块依赖导入

首先确认你当前组件所属的模块已经导入了FormsModule，这是ngModel和表单验证正常工作的前提：

// 对应模块的ts文件
import { FormsModule } from '@angular/forms';
@NgModule({
  imports: [
    // 其他导入...
    FormsModule
  ]
})
export class YourModule { }

步骤2：修改组件代码（.ts）

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

export class LocationVisitComponent implements OnInit {
  commentText: string = '';
  // 可选：如果需要在组件逻辑中读取验证状态可以加这行，不需要可以删除
  @ViewChild('commentInput') commentInput!: NgModel;

  ngOnInit(): void {}
}

步骤3：修改模板代码（.html）

移除硬编码的验证类，加上表单验证规则即可，这里设置最小输入长度为2，符合你要求的"输入长度大于1时取消错误状态"的逻辑：

<div style="margin-right: 2rem; display: flex;">
  <textarea 
    pInputTextarea
    #commentInput="ngModel"
    [(ngModel)]="commentText" 
    [minlength]="2"
    style="width: 100%;" 
    rows="3" 
    cols="50" 
    [autoResize]="false"
  ></textarea> 
</div>

当输入内容长度≥2时，Angular会自动把ng-invalid替换为ng-valid，红色边框的错误样式会自动消失。

极简备选方案（仅适合不需要完整表单能力的场景）

如果你不想引入完整的表单验证逻辑，也可以直接用Angular的[ngClass]动态绑定类：

<div style="margin-right: 2rem; display: flex;">
  <textarea 
    pInputTextarea
    [(ngModel)]="commentText" 
    [ngClass]="{'ng-invalid ng-dirty': commentText.length < 2}"
    style="width: 100%;" 
    rows="3" 
    cols="50" 
    [autoResize]="false"
  ></textarea> 
</div>

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