html - 输入字段或帮助文本在字段无效时不会变为红色

Question

我曾经使用 Bootstrap 3 实现 Angular 2/4 应用程序，并使用了 Reactive Forms 方法。我有一个字段验证，其中输入字段的边框变为红色，并且在该字段下方以红色字体显示一条错误消息。

看起来像这样:

<div class="form-group row"
                [ngClass]="{'has-error':    (sourcesForm.get('sourceName').touched || 
                                            sourcesForm.get('sourceName').dirty) && 
                                            !sourcesForm.get('sourceName').valid }">
                <label class="col-md-2 col-form-label"
                        for="sourceNameId">Source Name</label>
                <div class="col-md-8">
                    <input  class="form-control"
                            id="sourceNameId"
                            type="text"
                            placeholder="Source Name (required)"
                            formControlName="sourceName" />
                    <span class="help-block" *ngIf="(sourcesForm.get('sourceName').touched || 
                                                    sourcesForm.get('sourceName').dirty) && 
                                                    sourcesForm.get('sourceName').errors">
                        <span *ngIf="sourcesForm.get('sourceName').errors.required">
                            Please enter the Source Name.
                        </span>
                        <span *ngIf="sourcesForm.get('sourceName').errors.minlength">
                            The Source Name must be longer than 3 characters.
                        </span>
                        <span *ngIf="sourcesForm.get('sourceName').errors.maxlength">
                            The Source Name is too long.
                        </span>
                    </span>
                </div>
</div>

现在我必须使用 Bootstrap 4，错误消息或输入字段都不会变红。我如何意识到这一点？我试图将父 span-block 的类更改为“form-text”，但没有成功。

Answer 1

对于 Bootstrap v4 的测试版，您可以查看 Form validation docs .在那里您可以阅读有关新方法的信息，所有现代浏览器都支持使用有效/无效 css 类进行表单验证的 HTML5 方式。 Bootstrap 使用 .was-validated 和 .invalid-feedback 类来实现您想要实现的目标(参见代码片段)。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<form class="container" id="needs-validation" novalidate>
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
      <label for="validationCustom03">City</label>
      <input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  "use strict";
  window.addEventListener("load", function() {
    var form = document.getElementById("needs-validation");
    form.addEventListener("submit", function(event) {
      if (form.checkValidity() == false) {
        event.preventDefault();
        event.stopPropagation();
      }
      form.classList.add("was-validated");
    }, false);
  }, false);
}());
</script>

如果你想要更类似于 Bootstrap 3 的东西，你可以使用他们所谓的服务器端验证，正如它所写的那样:

As a fallback, .is-invalid and .is-valid classes may be used instead of the pseudo-classes for server side validation. They do not require a .was-validated parent class.

Bootstrap V4 alpha 版的先前答案(如果您必须使用它)。在 Bootstrap V4 Form Validation Docs有以下例子:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group has-danger">
  <label class="form-control-label" for="inputDanger1">Input with danger</label>
  <input type="text" class="form-control form-control-danger" id="inputDanger1">
  <div class="form-control-feedback">Sorry, that username's taken. Try another?</div>
  <small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>

所以我认为您只需要将 has-error 类更改为 has-danger