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

对于Beta版Bootstrap v4，您可以查看Form validation docs。在那里，您可以阅读有关新方法的信息，所有现代浏览器都支持HTML5格式验证方式和有效/无效的CSS类。 Bootstrap使用.was-validated和.invalid-feedback类来实现您想要实现的目标（请参阅代码段）。

＆＃13;

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

＆＃13;

如果你想要一些更类似于Bootstrap 3的东西，你可以使用他们称之为服务器端验证的内容，如下所示：

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

Bootstrap V4 alpha版本的上一个答案（如果你必须使用它）。在Bootstrap V4 Form Validation Docs上有以下示例：

＆＃13;

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

＆＃13;

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

Answer 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并将父span-class设置为invalid-feedback

Answer 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');
 }

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

 .form-control.ng-touched.ng-invalid{border:2px solid red;}

您只需查看结果即可。

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

3 个答案: