ngx-select-ex icon indicating copy to clipboard operation
ngx-select-ex copied to clipboard

Option to have `.is-invalid` (or custom class) applied to the form-control when form is invalid

Open not-a-doctor-stromberg opened this issue 6 years ago • 4 comments
trafficstars

Would it be possible to put a boolean on the component that apply the .is-invalid (or some other custom class) to the form-control element if the associated Angular FormControl is invalid? This would allow the following bootstrap rule to apply:

.was-validated .form-control:invalid, .form-control.is-invalid, .was-validated
.custom-select:invalid,
.custom-select.is-invalid {
  border-color: #dc3545;
}

As is, I am left creating a style like so to replicate the above rule:

.ng-invalid>div.ngx-select>div>div.form-control {
    border-color: $danger !important;
}

I can open an issue against the ng2-select component if you prefer -- I'm not sure if this is regularly updated from that or not :)

Thanks for the component though!

not-a-doctor-stromberg avatar Feb 21 '19 18:02 not-a-doctor-stromberg

@BloodChiefStromberg Unfortunately I am too busy and can not promise to solve it in soon. But, you can make a fix and make a pull request. I'll check and release it.

optimistex avatar Feb 21 '19 18:02 optimistex

I am in a similar boat :) I'll let you know if I find the time to make the PR.

Thanks again!

not-a-doctor-stromberg avatar Feb 21 '19 18:02 not-a-doctor-stromberg

I'm trying to make it, but I don't see the @Input formControl, the one that I use to set the component! How the component see formControl???

falco442 avatar May 25 '20 09:05 falco442

@falco442 Check this: https://github.com/optimistex/ngx-select-ex/blob/9a414f3a63b28a2f08d84535edb7a9111bd1acdc/src/app/lib/ngx-select/ngx-select.component.ts#L68

It implements the interface ControlValueAccessor: https://angular.io/api/forms/ControlValueAccessor

optimistex avatar May 25 '20 13:05 optimistex