时间戳

首页 > 解决方案 > ANGULAR - 如何禁用类使用（验证问题）

html - ANGULAR - 如何禁用类使用（验证问题）

问题描述

我正在为 Angular 使用来自 PrimeNG 的 UI 组件集合中的一个类。类组合ng-invalid ng-dirty用于显示验证错误。

.ts

export class LocationVisitComponent implements OnInit {
  commentText: string = '';
}

.html

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

当指定类时，文本区域的边框被涂成红色。我想检查文本区域长度是否大于一，如果是，我需要禁用一个类。这个问题的最佳解决方案是什么？

标签： htmlangulartypescriptvalidationprimeng

解决方案

您可以尝试 [ngClass] 属性指令，请参阅下面的代码如何做到这一点： -

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

推荐阅读