Override Bootstrap Material Design event listener for <input> element

Question

I have a Angular2 component which uses Bootstrap Material Design for look'n'feel

@Component({
 selector:'inputCustom',
 template:`
    <div class="form-group label-floating has-error">
        <label class="control-label" for="input">Type here</label>
        <input class="form-control" id="input" type="text">
        <p class="help-block">Some error text</p>
        <span class="material-input"></span>
    </div>
`})
class InputCustom{....}

I use Angular2 to track field changes and I want to control the visuals of my component manually i.e. when in error state by applying class 'has-error' to outer <div> element.

Currently when I apply class 'has-success' from my Angular2 controller component, Bootstrap immediately overrides it with a class 'has-error'.

How can I override/stop Bootstrap MD from tracking validation/input events on <input> elements?

Answer 1

I figured it finally out, you just disable the validation before actually starting up the library.

<script type="text/javascript">
    $.material.options.validate = false;
    $.material.init();

</script>