我正在使用 Angular 的 UI 組件 PrimeNG 集合中的一個類。類組合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>
當指定了類時，文本區域的邊框被涂成紅色。我想檢查文本區域長度是否大于 1，如果是，我需要禁用一個類。這個問題的最佳解決方案是什么？
uj5u.com熱心網友回復：
您可以嘗試相同的 [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>
uj5u.com熱心網友回復：
我用 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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/312677.html