ANGULAR

Question

我正在为 Angular 使用 UI 组件的 PrimeNG 集合中的 class。 class 组合 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>

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

Answer 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>

Answer 2

我用 Angular 响应式表单解决了这个问题。现在，我可以使用 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>

ANGULAR - 如何禁用 class 用法（验证问题）

ANGULAR - How to disable class usage (Validation problem)

html

validation

typescript

primeng