twitter-bootstrap - bootstrap 4 验证类未显示在输入/反馈元素中

Question

根据bootstrap documentation . following bootply markup应该包含绿色和红色元素，此外我期待 invalid-feedback要显示的消息。

我想将正确的样式合并到 angular4 react 形式中。

<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>

我已申请 .is-invalid类到几个元素，包括父元素。

编辑

我找到了 a bug logged 为了这。
所以本着stackoverflow的精神，我很高兴接受一个解决方法(css)回答要么放回所有旧的has-*类，或者解决这个错误，如果它已经准备好 angular 4 验证，那就更棒了......

Answer 1

选择了这个简单的选项

/* 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;
}