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

【问题标题】：ANGULAR - How to disable class usage (Validation problem)ANGULAR - 如何禁用类使用（验证问题）
【发布时间】：2021-11-30 23:47:42
【问题描述】：

我正在为 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>

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

【问题讨论】：

标签： html angular typescript validation primeng

【解决方案1】：

您可以尝试 [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>

【讨论】：

如果它适合你，请接受答案。
它在负载时不起作用。只有当我写了一段文字然后删除它时才有效。
将 commontext 初始化为空字符串，然后它应该可以工作
我用 Angular Reactive Form 解决了这个问题。如果您同意该解决方案，请查看解决方案并将答案标记为正确。

【解决方案2】：

我用 Angular Reactive Forms 解决了这个问题。现在，我可以使用 PrimeNG 组件和验证了。

.ts

import { FormGroup, FormControl } from '@angular/forms';

export class LocationVisitComponent implements OnInit {
  visitForm: FormGroup;

  ngOnInit(): void {
    this.visitForm=new FormGroup({
      textArea: new FormControl('')
    });
  }

  startVisit():void {
    alert('Submit');
  }
}

.html

<form novalidate (ngSubmit)="startVisit()" [formGroup]="visitForm">
    <textarea pInputText id="textAreaId" placeholder="Comment (required)" rows="3" cols="50"
    pInputTextarea [autoResize]="false" required minlength="15" formControlName="textArea"
    [ngClass]="{'ng-invalid ng-dirty' : (visitForm.get('textArea').touched || visitForm.get('textArea').dirty) && !visitForm.get('textArea').valid }"
    ></textarea>

    <div>
        <p-button type="submit"
            [title]="visitForm.valid ? 'Save your entered data' : 'Disabled until the form data is valid'"
            [disabled]="!visitForm.valid">
            Start
        </p-button>
    </div>
</form>

【讨论】：