Angular的数据驱动表单验证器 - ng-bootstrap-form-validation

Angular的数据驱动表单验证器 - ng-bootstrap-form-validation
插件名称 ng-bootstrap-form-validation
发布时间 2020年10月10日
插件作者 third774

一个使Bootstrap表单验证容易的Angular模块。

用法

ng-bootstrap-form-validation的工作原理是form-group,将div上的Bootstrap类用作组件选择器,然后将内容投影到为您处理表单验证反馈的组件中。

has-error和输入会根据输入是否有效(和都是)而has-success自动将和类添加或删除。form-grouptoucheddirty

验证信息出现时的输入dirtytouched以及有错误。

提交表单将遍历所有控件并将其标记为touched并向dirty用户提供反馈。此外,validSubmit您可以绑定到表单上的一个事件,而不是submit仅在表单实际有效时才触发。

basic-example.component.ts

import {Component, OnInit} from "@angular/core";
import {FormControl, FormGroup, Validators} from "@angular/forms";

@Component({
  selector: 'app-basic-example',
  templateUrl: './basic-example.component.html',
  styleUrls: ['./basic-example.component.css']
})
export class BasicExampleComponent implements OnInit {

  formGroup: FormGroup;

  ngOnInit() {
    this.formGroup = new FormGroup({
      Email: new FormControl('', [
        Validators.required,
        Validators.pattern(/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/)
      ]),
      Password: new FormControl('', [
        Validators.required,
        Validators.minLength(8),
        Validators.maxLength(20)
      ])
    });
  }

  onSubmit() {
    console.log(this.formGroup);
  }

  onReset() {
    this.formGroup.reset();
  }

}

basic-example.component.html

<div class="row">
  <div class="col-md-6 col-md-offset-3">
    <form [formGroup]="formGroup" (validSubmit)="onSubmit()">
      <div class="form-group">
        <label class="control-label">Email</label>
        <input type="text" class="form-control" formControlName="Email">
      </div>
      <div class="form-group">
        <label class="control-label">Password</label>
        <input type="password" class="form-control" formControlName="Password">
      </div>
      <button class="btn btn-default" type="button" (click)="onReset()">Reset</button>
      <button class="btn btn-primary pull-right" type="submit">Submit</button>
    </form>
  </div>
</div>

自定义错误消息的位置

注意:<bfv-messsages></bfv-messages>组件仍必须放置在中<div class="form-group">

basic-example.component.html

<div class="row">
  <div class="col-md-6 col-md-offset-3">
    <form class="form-horizontal" [formGroup]="formGroup" (validSubmit)="onSubmit()">
      <div class="form-group">
        <label class="control-label col-sm-2">Email</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" formControlName="Email">
          <bfv-messages></bfv-messages>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-sm-2">Password</label>
        <div class="col-sm-10">
          <input type="password" class="form-control" formControlName="Password">
          <bfv-messages></bfv-messages>
        </div>
      </div>
      <button class="btn btn-default" type="button" (click)="onReset()">Reset</button>
      <button class="btn btn-primary pull-right" type="submit">Submit</button>
    </form>
  </div>
</div>