Topic: Change input icon color for validation

Vin free asked 4 years ago


Is is possible to change the color of the icon based on a attribute on the input tag ?

When you have an input with an icon, i'd be nice to have an attribute to make the icon go with the same color as the validation.


Arkadiusz Idzikowski staff answered 4 years ago


You can use the rules from ngIf directivie in ngClass, for example:

html:

<form>
  <div class="md-form">
    <mdb-icon fas icon="envelope" class="prefix" [ngClass]="{'icon-invalid' : input.invalid && (input.dirty || input.touched)}"></mdb-icon>
    <input mdbInput mdbValidate name="input" type="text" id="form1" class="form-control" name="test" [(ngModel)]="required" #input="ngModel" required>
    <label for="form1">Required validator</label>
    <mdb-error *ngIf="input.invalid && (input.dirty || input.touched)">Input invalid</mdb-error>
    <mdb-success *ngIf="input.valid && (input.dirty || input.touched)">Input valid</mdb-success>
  </div>
</form>

css:

.icon-invalid i {
    color: red;
}


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.1.1
  • Device: laptop
  • Browser: chrome, edge, etc.
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No