向带有错误的多个输入字段添加红色边框

时间:2019-02-27 14:24:47

标签: html css angular

我目前正在从事角度应用程序。我有一个表单,我使用* 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
        }
    }

1 个答案:

答案 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]为假时,它将应用该类