bootstrap 4 validation classes are not being displayed in input / feedback elements

user_231821 0
Viewed 1707

According to the bootstrap documentation. The following bootply markup should contain green and red elements, moreover I am expecting the invalid-feedback messages to be displayed.

I want to incorporate correct styles into an angular4 reactive form.

<form class="was-validated">
    <div class="form-group is-invalid">
        <div class="input-group mb-3">
            <span class="input-group-addon">@</span>
            <input type="text" class="form-control is-invalid" placeholder="Email" formcontrolname="email">
        </div>
        <div class="invalid-feedback">Shucks, check the formatting of that and try again.</div>
    </div>

    <div class="form-group has-success">
        <div class="input-group mb-3">
            <span class="input-group-addon">@</span>
            <input type="text" class="form-control" placeholder="Email" formcontrolname="email">
        </div>
        <div class="invalid-feedback">Shucks, check the formatting of that and try again.</div>
    </div>
</form>

I have applied the .is-invalid class to several elements, including the parent.

edit

I have found a bug logged for this. So in the spirit of stackoverflow, I am very happy to accept a workaround (css) answer that either put's back all the old has-* classes, or works around the bug, extra awesome if it's angular 4 validation ready...

bootstrap-4 twitter-bootstrap
1 Answers

went with this simple option

/* validation and error display */
.invalid-feedback {
    display: none;
}
.was-validated .invalid-feedback {
    font-family: oxygen;
    display: block;
}

show-errors ul {
    margin: 0;
    padding: 0;

    li, li.invalid-feedback {
        margin: 0;
        padding: 0;
        line-height: 1em;
    }
}

show-errors + button {
    margin-top:1em;
}
user_2318210
Related