当字段无效时，输入字段或帮助文本不会变成红色

Posted 2023-03-05

【中文标题】当字段无效时，输入字段或帮助文本不会变成红色

【英文标题】：input field or help text doesn't turn red when field is invalid

【发布时间】：2018-02-09 00:55:34

【问题描述】：

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

看起来像这样：

<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”，但没有成功。

【参考方案1】：

对于 Bootstrap v4 的 beta 版本，您可以查看Form validation docs。在那里，您可以了解所有现代浏览器都支持的新方式，用于 html5 表单验证方式，并带有有效/无效的 css 类。 Bootstrap 使用 .was-validated 和 .invalid-feedback 类来实现您想要实现的目标（参见代码 sn-p）。

<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 的东西，你可以使用他们所谓的服务器端验证，因为它是这样写的：

作为后备，可以使用 .is-invalid 和 .is-valid 类代替伪类来进行服务器端验证。它们不需要 .was-validated 父类。

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

【讨论】：

这是 bootstrap 4 的 alpha 版本，我使用的是 beta 版本，其中不包含 has-danger 类。 Here 就是证明。我设法用text-danger 将文本变为红色，但输入字段的边框仍然不是红色

好的。更新了我的答案以支持测试版。

对不起，但我还是不明白，我用was-validated 和invalid-feedback 替换了has-error，但它仍然不起作用。使用invalid-feedback，输入消失。

我解决了，我需要将[ngClass]放入input-tag。然后我必须将类定义为is-invalid，并将父跨度类设置为invalid-feedback。非常感谢您的帮助 =)

很高兴它有帮助:)

【参考方案2】：

这是解决方案：

<div class="form-group row">
                <label class="col-md-2 col-form-label"
                        for="sourceNameId">Source Name</label>
                <div class="col-md-8">
                    <input  class="form-control"
                            [ngClass]="'is-invalid':    (sourcesForm.get('sourceName').touched || 
                                sourcesForm.get('sourceName').dirty) && 
                                !sourcesForm.get('sourceName').valid "
                            id="sourceNameId"
                            type="text"
                            placeholder="Source Name (required)"
                            formControlName="sourceName" >
                    <span class="invalid-feedback" *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>

我需要将[ngClass] 放入input 标记中。然后我必须将类定义为is-invalid，并将父跨度类设置为invalid-feedback

【参考方案3】：

我知道您的问题是很久以前的问题了，但它是通过响应式表单技术和引导程序 4 来验证表单控件输入字段以显示验证的最佳方式。首先，您需要为您的表单编写一些代码： 在 html 部分：

 <form [formGroup]="myForm">
  <div class="form-group">
   <label for="name">first Name: </label>
   <input type="text" class="form-control" formControlName="firstName" id="name">
   <div *ngIf="firstName.touched && firstName.invalid" class="alert alert-danger">
   <div *ngIf="firstName.errors.required">filling name is required!</div>
   </div>
  </div>

在ts文件中，你应该实现逻辑来进行验证。

在ts文件中：

 myForm = new FormGroup(
 'firstName':new FormControl('',Validators.required)

 )
 //getter method
 get firstName()
 this.myForm.get('firstName');
 

现在您可以看到验证正在运行。现在为输入字段赋予样式以在无效输入周围显示红色边框，只需转到组件的 css 文件并将此类添加到 css 文件中：

 .form-control.ng-touched.ng-invalidborder:2px solid red;

你可以简单地看到结果。