modify style when not valid and is touched

Question

modify style when not valid and is touched

When I try to modify the style of an i tag based on the touched and invalid state of another field, only the input tag's style changes and not the i tag. Here's the CSS code I'm using:

input.ng-touched.ng-invalid
{
    border-color: red;
}

input.ng-valid
{
    border-color: green ;
}

.green-icon
{
    color:green;
}
.red-icon
{
    color:red;
}

 <div class="form-group">
    <div class="input-group">
      <div class="input-group-prepend">
        <div class="input-group-text bg-white">
          <i class="fas fa-user circle"  [class.green-icon]="CardOwnerName.valid" [class.red-icon]="CardOwnerName.invalid && CardOwnerName.touched"></i>
        </div>
      </div>
      <input #CardOwnerName formControlName="CardOwnerName" name="CardOwnerName" class="form-control" placeholder="Card Owner Name" required>
    </div>  
  </div>

It seems like my Angular version may be causing an issue. Could it be that something has been deprecated?

html css angular angular7

Answer 1

Answer №1

Update the template by removing the reference to the element and instead accessing the form object:

<input formControlName="CardOwnerName" name="CardOwnerName" class="form-control" placeholder="Card Owner Name" required>

retrieve CardOwnerName() {
    return this./* insert form group name */.get('CardOwnerName');
}

Answer 2

Update the template by removing the reference to the element and instead accessing the form object:

<input formControlName="CardOwnerName" name="CardOwnerName" class="form-control" placeholder="Card Owner Name" required>

retrieve CardOwnerName() {
    return this./* insert form group name */.get('CardOwnerName');
}

Answer 3

Answer №2

Give this a try:

 <i class="fas fa-user circle" [ngClass]="{'red-icon': form.get('CardOwnerName').invalid, 'green-icon': form.get('CardOwnerName').valid }"  ></i>

Alternatively, you can also use:

<i class="fas fa-user circle" [ngClass]="(form.get('CardOwnerName').valid)?'green-icon':'red-icon'"  ></i>

Check out the working demo here

Answer 4

Give this a try:

 <i class="fas fa-user circle" [ngClass]="{'red-icon': form.get('CardOwnerName').invalid, 'green-icon': form.get('CardOwnerName').valid }"  ></i>

Alternatively, you can also use:

<i class="fas fa-user circle" [ngClass]="(form.get('CardOwnerName').valid)?'green-icon':'red-icon'"  ></i>

Check out the working demo here

Answer 5

Answer №3

The issue resolved using the ChangeDetectorRef in Angular.

import { ChangeDetectorRef } from '@angular/core';
 
constructor(private cdr: ChangeDetectorRef) {} 
ngOnInit() {
this.cdr.markForCheck();
}

Answer 6

The issue resolved using the ChangeDetectorRef in Angular.

import { ChangeDetectorRef } from '@angular/core';
 
constructor(private cdr: ChangeDetectorRef) {} 
ngOnInit() {
this.cdr.markForCheck();
}

modify style when not valid and is touched

Answer №1

Answer №2

Answer №3

Similar questions

Is it possible to set an onmousedown event to represent the value stored at a specific index in an array, rather than the entire array call?

Issue with detecting window resize event in Angular 7 service

How are the .map files utilized in angular-cli, and is there a way for ng build to generate these files automatically?

Issues arise when attempting to construct an angular docker image

Design: A stationary text box positioned on the left side alongside a selection of scrollable MDL cards on the right

Why does Next.js throw an error when using an additional <div></div>?

How can you activate ng-valid in Angular2 when a jQuery plugin is linked to the ng-form element?

Having trouble with the functionality of my JavaScript slider

What might be the reason behind the selection value not changing in the dropdown menu?

"The JavaScript code included in the index.html file is not functioning as expected when called in the main.js file within a

Karma Unit test: Issue with accessing the 'length' property of an undefined value has been encountered

Invoke data-id when the ajax call is successful

What is the best way to sort a table by column index using HTML?

Does a specific HTML element exist that is unable to have JavaScript within its content?

Accessing a specific child div within a parent div using JavaScript and CSS

Using jQuery sortable with the overflow property set to hidden to sort items between two lists

Is there a way to position the button at the bottom right corner of my div box?

Leveraging SASS for injecting a variable into a mixin where the declaration is in string format

Angular DatePipe is struggling to identify the date format

Tips for choosing classes with identical names without resorting to incremental IDs