Ngx-admin: Required Field CSS border

[tim6400]

This Would be a nice to have: Style validation in form control like this:

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

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

Maybe some one can tell me where do i need to place this style because in Global CSS it's not working.

[yggg]

Hi, @tim6400. The code you posted should work. My guess is that your selector specificity is lower than components styling selectors. If you try to increase selector weight, for example, like this:

nb-auth-block .ng-valid[required][nbInput] {
  ...
}

But since nebular has own theme system, more convenient way to modify controls styling is to create your own theme and play around with form-control- variables. See theme system and enable theme system guides for details. ngx-admin already has set up in place, you can modify styles file by specifying form-control- variables. You can find the full list of available variables in the docs.

[tim6400]

Thank you

[gaspardip]

I disagree with the suggested solution and I think nebular should take advantage of angular's classes (ng-dirty, ng-valid, ng-invalid and so on).

For some reason, it uses the .input-danger, .input-success, etc classes. This forces you to write things like this to achieve validation feedback on a form, which just clutters the code in my opinion, given that angular already sets the corresponding classes. Nebular should at least use the same value for form-control-danger-border-color/.ng-invalid and form-control-success-border-color/.ng-valid

I can open a new issue in the nebular repo regarding this if you want.

Im currently setting angular's validation classes using some like

@include nb-install-component() {
  .ng-dirty.ng-invalid {
    border-color: #ff6b83;
  }

  .ng-dirty.ng-valid {
    border-color: #5dcfe3;
  }
}

on a new file I called forms.scss that I import in styles.css.

The problem with this approach is that I can't override ng-invalid/ng-valid on a per-theme basis, or at least I don't know how to, so if you could point me in the right direction would be great.

@yggg @nnixaa

[feitzi]

@gaspardip did you found a solution? It's annoying that nebular doesn't support classic form validation on default.