Search code examples
angulardropdownprimeng

p-dropdown how to change border colour and shadow based on ng-invalid and focus options

Hi what I need to do is to see p-dropdown border in red colour signaling that no any required value has been chosen. So field is required, border is red (no ng-dirty or ng-touched applid not necessary). Then when I click on the dropdown menu, I want to see red shadow highlight around this border. When I click away I need this shadow animation or how to call it disepeare but remain dropdown in red border. And finally when I choose value I don´t need anymore red border.

enter image description here - Before any action and any click on dropdown

enter image description here - this is how it should look like after clicking on this field.

enter image description here - final state all ok.

All code has been copied from original primeng page https://www.primefaces.org/primeng/#/dropdown for simple dropdown menu test. 

<div class="container">
  <div class="row">
    <div class="col-sm-10">
      <h3 class="first">Single</h3>
      <p-dropdown [options]="cities" [(ngModel)]="selectedCity"  placeholder="Select a City" optionLabel="name"
                  [showClear]="true" **required**></p-dropdown>
      <p>Selected City: {{selectedCity ? selectedCity.name : 'none'}}</p>

    </div>
  </div>
</div>

On some other stackowerflo they advice to do this in css.

p-dropdown.ng-invalid:not(form) > div {
  border: 5px solid red; /* red */
}

p-dropdown.ng-valid[required], p-dropdown.ng-valid.required {
  border: 0 none;
}


p-dropdown.ng-invalid:not(form) {
  border: 0 none;
}

How to do that please?

Solution

  • SOLVED:

     p-dropdown.ng-invalid:not(form) > div {
    border: 1px solid #D40000;
  }

  p-dropdown.ng-invalid.ng-touched.ui-inputwrapper-focus:not(form) > div {
    box-shadow: 0 0 0 0.05em #F40000;
    border: 1px solid #D40000;
    border-radius: 2px;
  }

  p-dropdown.ng-invalid.ng-untouched.ui-inputwrapper-focus:not(form) > div {
    box-shadow: 0 0 0 0.05em #F40000;
    border: 1px solid #D40000;
    border-radius: 2px;
  }