I am looking to modify my CSS class in PrimeNG and Angular 14 depending on the presence of an error in my p-dropdown component. Can anyone guide me on how to

Question

I am looking to modify my CSS class in PrimeNG and Angular 14 depending on the presence of an error in my p-dropdown component. Can anyone guide me on how to

I am currently using PrimeNG and Angular 14. My goal is to add a red border class to my p-dropdown component when there are errors in the form control, and apply another class if there are no errors. I attempted the following:

      <p-dropdown
      styleClass="border-round-md"
      [ngClass]="{
        'border-red-500':
          submitted && !this.form.get('myName')?.valid
      }"
      [options]="cycleFrPerMonth"
      formControlName="myName"
    ></p-dropdown>

Unfortunately, this approach didn't work as expected. The error class doesn't appear even when there are errors present. I also tried replacing the condition with the word "true", but that didn't solve the issue either.

css primeng form-control angular14 p-dropdown

Answer 1

Answer №1

Here is a helpful solution for your issue:

When using ngClass with p-dropdown, apply your class to the first div inside the component by using the styleClass input.
Include your class with /deep/ in the SCSS file of your component like this:

:host ::ng-deep .border-red-500{
 border-color: #007bff !important;
}

Instead of ngClass, utilize styleClass as shown below:

<p-dropdown
  [styleClass]="submitted && !form.get('myName')?.valid 
   ? 'border-red-500' : 'border-round-md' "
  [options]="cycleFrPerMonth"
  formControlName="myName"
></p-dropdown>

In your style file:

:host ::ng-deep .border-color {
  // /*your style here */
}

:host ::ng-deep .border-round-md {
   // /*your style here */

}

This should resolve the issue effectively.

Answer 2

Here is a helpful solution for your issue:

When using ngClass with p-dropdown, apply your class to the first div inside the component by using the styleClass input.
Include your class with /deep/ in the SCSS file of your component like this:

:host ::ng-deep .border-red-500{
 border-color: #007bff !important;
}

Instead of ngClass, utilize styleClass as shown below:

<p-dropdown
  [styleClass]="submitted && !form.get('myName')?.valid 
   ? 'border-red-500' : 'border-round-md' "
  [options]="cycleFrPerMonth"
  formControlName="myName"
></p-dropdown>

In your style file:

:host ::ng-deep .border-color {
  // /*your style here */
}

:host ::ng-deep .border-round-md {
   // /*your style here */

}

This should resolve the issue effectively.

Answer 3

Answer №2

To start, make sure to check angular.json to confirm that the primeflex.css style has been added.

styles:[...,"node_modules/primeflex/primeflex.css"]

If it is not there, you can install it using: npm install primeflex --save and then import it into the styles array in angular.json

Next, add a red color to your Primeng palette in the style.css file:

:root {
  --red-50: #fff5f5;
  --red-100: #ffd1ce;
  --red-200: #ffada7;
  --red-300: #ff8980;
  --red-400: #ff6459;
  --red-500: #ff4032;
  --red-600: #d9362b;
  --red-700: #b32d23;
  --red-800: #8c231c;
  --red-900: #661a14;
}

Finally, here is an example link to meet your requirements: stackblitz

Answer 4

To start, make sure to check angular.json to confirm that the primeflex.css style has been added.

styles:[...,"node_modules/primeflex/primeflex.css"]

If it is not there, you can install it using: npm install primeflex --save and then import it into the styles array in angular.json

Next, add a red color to your Primeng palette in the style.css file:

:root {
  --red-50: #fff5f5;
  --red-100: #ffd1ce;
  --red-200: #ffada7;
  --red-300: #ff8980;
  --red-400: #ff6459;
  --red-500: #ff4032;
  --red-600: #d9362b;
  --red-700: #b32d23;
  --red-800: #8c231c;
  --red-900: #661a14;
}

Finally, here is an example link to meet your requirements: stackblitz

I am looking to modify my CSS class in PrimeNG and Angular 14 depending on the presence of an error in my p-dropdown component. Can anyone guide me on how to

Answer №1

Answer №2

Similar questions

Is it possible to consolidate all CSS and JS links into a single PHP file for easier management?

Navigational menu aligned vertically alongside a horizontal subheading

Any advice on how to navigate to a different screen based on the content of a dynamic grid view?

How can I customize the styling of Autocomplete chips in MUI ReactJS?

The alignment of the image background is malfunctioning on the iPad 3 device

Challenges with Div Height and Border

Navigating the World of CSS Selectors - Balancing Style Control Without Excessive Class Usage

Challenge with jQuery UI Draggable: Div moves slower than mouse cursor

Mastering the art of using div boxes in boxing form

Applying the .active class to a button which reveals the corresponding div

Fetching data in VueJs before redirecting to a new page

Apply borders to inline-block elements uniformly

What is the most efficient way to incorporate or import CSS from a CDN into a Create React App without needing to eject?

Using jQuery to store the last selected href/button in a cookie for easy retrieval

Creating a mobile-friendly layout with 3 columns: Tips and tricks

Incorporating fresh CSS styles through Selenium

What is the reason behind a span's impact on the vertical alignment of another sibling span?

Only a select few expandable elements in the jQuery accordion

Use desktop images to set the background for mobile views in a React JSX environment

In the Twitter Bootstrap documentation, which element is utilized for the sidebar?