我目前正在从事角度应用程序。我有一个表单,我使用* ngFor来添加输入字段,因为输入的数量及其类型并不总是相同的(这取决于从后端接收的数据)。当按下提交按钮时,我要进行一些验证。我应该如何仅在出现错误的输入字段上添加红色边框?
代码如下:
<div *ngFor="let content of contents; let i = index"
<h6 *ngIf="content.Label">{{ content.Label | translate }}</h6>
<ng-container [ngSwitch]="content.Type"
<input *ngSwitchCase="INPUT_TYPE.TextBox"
#input
value={{content?.Value}}
type="text">
<textarea *ngSwitchCase="INPUT_TYPE.TextBoxMultiLine"
#input
value="{{content?.Value}}">
</textarea>
</ng-container>
</div>
<button type="button"(click)="accept()">Submit</button>
@ViewChildren('input') data;
accept() {
this.data = this.data.toArray();
for (let i = 0; i < this.data.length; i++) {
//validations
if (this.data[i].nativeElement.value....) {
//add red border to the input fields with errors
}
}
答案 0 :(得分:1)
您可以创建一个类redBorder,
.redBorder{
border-style: solid;
border-color: green;
}
然后您必须初始化一个数组,该数组指示每个元素是否均已验证
let validations= []
for (let i = 0; i < this.data.length; i++) {
validations.push(true);
}
,您必须在必须为验证创建的数组中更改此数组。 在HTML中,您必须添加以下更改,添加[ngStyle]:
<ng-container [ngSwitch]="content.Type" [ngStyle]="{'redBorder': !correctValidated[i]}"
仅当验证[i]为假时,它将应用该类