Topic: Change input icon color for validation
Vin free asked 5 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 5 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;
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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