p-dropdown 如何根据 ng-invalid 和 focus 选项更改边框颜色和阴影

Question

您好，我需要做的是看到红色的 p 下拉边框，表明没有选择任何所需的值。所以字段是必需的，边框是红色的（不需要 ng-dirty 或 ng-touched applid）。然后当我点击下拉菜单时，我想看到这个边框周围的红色阴影突出显示。当我点击离开时，我需要这个阴影动画或者如何称呼它 disepeare 但在红色边框中保持下拉。最后，当我选择值时，我不再需要红色边框了。

- 在任何操作和任何点击下拉菜单之前

- 这是单击该字段后的样子。

- 最终状态一切正常。

所有代码均复制自原始primeng页面https://www.primefaces.org/primeng/#/dropdown，用于简单的下拉菜单测试。

<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>

在其他一些 stackowerflo 上，他们建议在 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;
}

请问怎么做？

Answer 1

已解决：

 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;
  }

Answer 2

也可以在p-dropdown的基础上加上Id，然后在ID的基础上加上css

代码：

 <p-dropdown id="drop-down" [options]="cities" [(ngModel)]="selectedCity"  placeholder="Select a City" optionLabel="name"
                          [showClear]="true" required=true></p-dropdown>`


  #drop-down.ng-invalid:not(form) > div {
         border: 1px solid #D40000;
          }
   #drop-down.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;
              }

 #drop-down.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;
          }

p-dropdown 如何根据 ng-invalid 和 focus 选项更改边框颜色和阴影

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

dropdown

primeng

angular