Angular styling for input elements that are in the pristine state

Question

Angular styling for input elements that are in the pristine state

Hey there, I'm working with a CSS class that applies a red border to an input field when it is required and invalid, and changes to green when it becomes valid.

CSS

.ng-valid[required], .ng-valid.required  {
  border-left: 5px solid #42A948; /* green */
}

.ng-invalid:not(form)  {
  border-left: 5px solid #a94442; /* red */
}

HTML

<input
              type="text"
              class="form-control"
              placeholder="Vehicle Code"
              [formControl]="codeControl"
              required
            />

Now, I'm looking to change the left border color to something else when the input field hasn't been touched yet. Currently, on page load, the default left border is red and changes to green when validated.

css angular

Answer 1

Answer №1

To style elements dynamically in Angular, you can utilize either ngStyle or ngClass.

In the following example, I have opted to use ngClass as my preferred method.

Here is an example of the CSS in the Component.css file:

.valid {
  border-left: 5px solid #42A948;
}

.required {
  border-left: 5px solid #a94442;
}

Within the Component.html file, you can implement the styling like so:

<form [formGroup]="form">
  <input 
    type="text" 
    [formControl]="name" 
    [ngClass]="{'required': name.invalid && (name.dirty || name.touched), 'valid': name.valid && (name.dirty || name.touched)}"
  >
</form>

The Component.ts file contains the necessary logic to handle form validation:

export class AppComponent  {
  constructor() { }

  form = new FormGroup({
    name: new FormControl('', Validators.required)
  });

  get name(): AbstractControl {
    return this.form.get('name')
  } 
}

For your convenience, I have provided a link to a Stackblitz demonstration:

https://stackblitz.com/edit/angular-5xsg7r

Enjoy coding and happy styling! :-)

Answer 2

To style elements dynamically in Angular, you can utilize either ngStyle or ngClass.

In the following example, I have opted to use ngClass as my preferred method.

Here is an example of the CSS in the Component.css file:

.valid {
  border-left: 5px solid #42A948;
}

.required {
  border-left: 5px solid #a94442;
}

Within the Component.html file, you can implement the styling like so:

<form [formGroup]="form">
  <input 
    type="text" 
    [formControl]="name" 
    [ngClass]="{'required': name.invalid && (name.dirty || name.touched), 'valid': name.valid && (name.dirty || name.touched)}"
  >
</form>

The Component.ts file contains the necessary logic to handle form validation:

export class AppComponent  {
  constructor() { }

  form = new FormGroup({
    name: new FormControl('', Validators.required)
  });

  get name(): AbstractControl {
    return this.form.get('name')
  } 
}

For your convenience, I have provided a link to a Stackblitz demonstration:

https://stackblitz.com/edit/angular-5xsg7r

Enjoy coding and happy styling! :-)

Angular styling for input elements that are in the pristine state

Answer №1

Similar questions

Adjust the menu scrollbar position to the right or limit scrolling to within the menu area

Securing communication between Angular 2 web pages and the ASP.NET Core server through encryption

Utilizing CSS and jQuery to align images in the center of the screen

How to integrate a toggle switch into an Angular datepicker component

Using R Markdown and Hugo to Style Blog Titles

Issues with code functionality following subscription via a POST request

Error: No injection provider found for function(){}!

Enhance mix-blend mode or filtering effects in SCSS using an SVG component in VueJS

How can one correctly log out of an Angular application that is integrated with Firebase Authentication and Firestore?

Oops! There was an error: Unable to find a solution for all the parameters needed by CountdownComponent: (?)

Leveraging the power of JavaScript to reveal concealed div elements

The media query will only impact elements and classes within the index.html file, and will not apply to any other

implement some level of control within the ngFor directive in Angular

Unable to connect input with abstract classes at a hierarchy depth of 2 levels or more

How can I bring the toolbar to the forefront of the page in an Angular/HTML environment?

Alignment of Submenus in a CSS Vertical Menu

What could be causing this div to shift positions when the browser window is resized?

Looking to build a unique form validator for two inputs? Ensure that one input number is consistently larger than the other with this guide

Maintaining text color while adding a color overlay to a Bootstrap Jumbotron

Encountering NaN in the DOM while attempting to interpolate values from an array using ngFor