Angular2: change border color for error in form validation

Question

Trying to change the border color for error message. this is my html code

<div class="form-group">
  <label>Name:</label>
  <div class="wpr">
    <div class="wpr__icon">
      <i class="fa fa-user"></i>
    </div>
    <input #name="ngModel" id="name" name="name" type="text" class="form-control text-line" [(ngModel)]="PersonInfo.name"
      pattern="[a-zA-Z0-9\s]+" required>
  </div>
  <ul class="alert-error" *ngIf="name.touched && name.errors">
    <li *ngIf="name.errors.required"> Name is required. </li>
    <li *ngIf="name.errors.pattern">Invalid name.</li>
  </ul>
</div>

Currently error messages are showing up, but I want to change the textbox border-color to red. How to do that.

Answer 1

Here is another solution.

input.ng-invalid.ng-touched {
  border: 1px solid red;
}

If you inspect your input field, you can see some css classes that Angular dynamically attach to your element that you can take advantage of.

Answer 2

You can use ngClass directive to add css class to your input field when it is invalid:

<input #name="ngModel" id="name" name="name" type="text" class="form-control text-line"
[ngClass]="{'red-border-class': name.errors}" [(ngModel)]="PersonInfo.name" pattern="[a-zA-Z0-9\s]+" required>

Hope you don't need help writing css. :-)