ng-select CSS issues, bootstrap input-sm

Question

So while using ng-select on a reactive form, I'm trying to style the field on error (invalid) like this.

the field:

<ng-select class="form-control input-sm" [class.store-error]="showError('store')"...

The show error method looks like this - and works for ALL OTHER FORM FIELDS

showError (fieldName: string) {
    const field = this.form.get(fieldName);
    return field.invalid && (field.touched || this.submitAttempted);
}

ng select does not change classes.

It appears as though ng-select constructs a div on top of a form field element, and changing the bootstrap class to input-sm exposes this (so a secondary question is how to get the input-sm applied to ng-select)

this CSS isse is secondary to the field NOT showing invalid using css-binding. Has anyone solved this?

Solution

1) Here is plunker example showing applied custom error class https://plnkr.co/edit/zF6GsJ?p=preview

2) Bootstrap .form-control class is mostly used for native html elements, but custom elements which already has some styling will not work correctly so you need to style them yourself.

.form-control.ng-select {
    border: none;
    padding: 0;
}

Comments

[j-p]

I got that. however, notice if you add .store-error { border: solid thin red; } to the css, that the [class.store-error] binding doe NOT get applied...its the CSS class binding that doesnt work