Add red border to multiple input fields with errors

Question

I am currently working on an angular application. I have a form and I used *ngFor to add input fields because the number of inputs and their type is not always the same (it depends on the data received from backend). When the submit button is pressed, I want to make some validations. How should I add a red border only on those input fields that have errors?

The code looks like this:

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

Angular add the class ng-invalid to your invalid inputs, just define a class .ng-invalid{border-color:red} angular.io/guide/form-validation#control-status-css-classes always you're using ngModel or ReactiveForms — Eliseo
– Eliseo, Commented Feb 27, 2019 at 14:47

Joziok · Accepted Answer · 2019-02-27 15:09:03Z

1

You can create a class redBorder,

.redBorder{
  border-style: solid;
  border-color: green;
}

then you have to initialize an array wich indicates if each element is validated

let validations= []
for (let i = 0; i < this.data.length; i++) {
    validations.push(true);
}

and you have to change this array in the for that you have to create for the validation. In the HTML you have to add the following change, adding [ngStyle]:

<ng-container [ngSwitch]="content.Type"  [ngStyle]="{'redBorder': !correctValidated[i]}"

It will apply the class only when validations[i] is false

edited Feb 27, 2019 at 15:09

answered Feb 27, 2019 at 14:56

Joziok

155 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Add red border to multiple input fields with errors

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related