ng2-validation/angular2表单验证模块使用方法

效果图

官方参考文档：https://github.com/yuyang0410...

注意：

1. 验证是在组件重定义的变量，然后通过界面中的 #username="ngModel"这个样式来验证的，和[(ngModel)]="username"无关

2. 提交按钮可以设置如果验证不通过，就处于只读状态
   <button [disabled]="!myform.form.valid">提交</button>

1、安装模块

npm install ng2-validation --save

2、配置app.module.ts

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import {CustomFormsModule} from "ng2-validation";
...
imports: [
    FormsModule,
    CustomFormsModule,
    ReactiveFormsModule
  ],
...

3、配置组件，官方文档有详细的配置方法。

import {Component} from '@angular/core';
// 1. 引入forms中的组件
import {FormGroup, FormControl} from '@angular/forms';
// 2. 引入ng2-validation中的组件
import {CustomValidators} from 'ng2-validation';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // 3. 定义表单组
  form:FormGroup;

  constructor() {
    // 4. 初始化表达组里面的内容
    this.form = new FormGroup({
      // 定义form.field 是一个区间
      field: new FormControl('', CustomValidators.range([5, 9])),
      // 定义form.num 是数字类型
      num: new FormControl('', CustomValidators.number)
    });
  }
}

4、配置模板，使用

<br/>
<br/>
<br/>
<div class="container">
  <form #myForm="ngForm">
    <div>
      <input type="text" [(ngModel)]="form.field" name="field" #field="ngModel" [rangeLength]="[5, 9]"
             class="form-control" required/>
      <p class="text-danger" *ngIf="field.errors?.rangeLength">输入字符长度在5-9之间</p>
    </div>
    <p></p>
    <div>
      <input type="text" [(ngModel)]="form.num" name="num" #num="ngModel" number class="form-control" required/>
      <p class="text-danger" *ngIf="num.errors?.number">只能输入数字</p>
    </div>
    <p></p>
    <!--这个是提交按钮,如果条件不满足, 提价按钮为只读-->
    <p>
      <button [disabled]="!myForm.form.valid" class="btn btn-primary">提交</button>
    </p>
  </form>
</div>

5、添加多个条件

1. 组件配置
constructor() {
    // 初始化表达组里面的内容
    this.form = new FormGroup({
      username: new FormControl('', CustomValidators.range([5, 9])),
      max: new FormControl('', CustomValidators.max(100)),
      min: new FormControl('', CustomValidators.min(0)),
      num: new FormControl('', CustomValidators.number),
      phone: new FormControl('', CustomValidators.phone('zh-CN'))
    });
  }
2. 模块配置
<div>
      <input type="text" [(ngModel)]="form.num" name="num" #num="ngModel" #max="ngModel" #min="ngModel" number class="form-control" required
             placeholder="年龄" [max]="100" [min]="0"/>
      <p class="text-danger" *ngIf="num.errors?.number || max.errors?.max || min.errors?.min">只能输入0-100数字</p>
</div>

6、示例代码

<form #myForm="ngForm">
  <div class="row">
    <div class="col-sm-6 col-sm-offset-3">
      <div>
        <input type="text" [(ngModel)]="form.username" name="username" #username="ngModel" [rangeLength]="[6, 20]"
               class="form-control" required placeholder="姓名"/>
        <p class="text-danger" *ngIf="username.errors?.rangeLength">输入字符长度在5-9之间</p>
      </div>
      <p></p>
      <div>
        <input type="text" [(ngModel)]="form.phone" name="phone" #phone="ngModel" [phone]="'zh-CN'"
               class="form-control" required placeholder="手机号"/>
        <p class="text-danger" *ngIf="phone.errors?.phone">手机号码格式不正确</p>
      </div>
      <p></p>
      <div>
        <input type="email" [(ngModel)]="form.email" name="email" #email="ngModel" email
               class="form-control" required placeholder="邮箱"/>
        <p class="text-danger" *ngIf="email.errors?.email">
          邮箱地址不正确
        </p>
      </div>
      <p></p>
      <div>
        <input type="url" [(ngModel)]="form.url" name="url" #url="ngModel" url
               class="form-control" required placeholder="个人主页" />
        <p class="text-danger" *ngIf="url.errors?.url">网络地址格式不正确</p>
      </div>
      <p></p>
      <div>
        <input type="text" [(ngModel)]="form.age" name="num" #age="ngModel" number class="form-control" required
               placeholder="年龄"/>
        <p class="text-danger" *ngIf="age.errors?.number">只能输入数字</p>
      </div>
      <p></p>
      <div>
        <input type="radio" [(ngModel)]="form.sex" name="sex" value="男" required/> 男
        <input type="radio" [(ngModel)]="form.sex" name="sex" value="女" required/> 女
      </div>
      <p></p>
      <div>
        <input type="text" [(ngModel)]="form.position" name="position" #position="ngModel" class="form-control" required
               placeholder="职位" [rangeLength]="[3, 20]"/>
        <p class="text-danger" *ngIf="position.errors?.rangeLength">职位不详细</p>
      </div>
      <p></p>
      <div>
        <textarea placeholder="爱好" [(ngModel)]="form.hobby" name="hobby" #hobby="ngModel" class="form-control" required
                  [rangeLength]="[2, 50]"></textarea>
        <p class="text-danger" *ngIf="hobby.errors?.rangeLength">
          字少两个字,最多50个字
        </p>
      </div>
      <p></p>
      <!--这个是提交按钮,如果条件不满足, 提价按钮为只读-->
      <p>
        <button [disabled]="!myForm.form.valid" class="btn btn-primary">提交</button>
      </p>
    </div>
  </div>
</form>

import {Component} from "@angular/core";
// 1. 引入forms中的组件
import {FormGroup, FormControl, Validators} from '@angular/forms';
// 2. 引入ng2-validation中的组件
import {CustomValidators} from 'ng2-validation';
@Component({
  selector: "oa-add-friends",
  templateUrl: "../templates/add_friends.component.html"
})
export class AddFriendsComponent {
  // 3. 定义表单组
  form:FormGroup;

  constructor() {
    // 4. 初始化表达组里面的内容
    this.form = new FormGroup({
      // 定义form.field 是一个区间
      username: new FormControl('', CustomValidators.range([6, 20])),
      // 定义form.num 是数字类型
      age: new FormControl('', CustomValidators.number),
      sex: new FormControl('', Validators.required),
      position: new FormControl('', CustomValidators.range([2, 20])),
      habby: new FormControl('', CustomValidators.range([2, 50])),
      phone: new FormControl('', CustomValidators.phone("zh-CN")),
      email: new FormControl('', CustomValidators.email),
      url: new FormControl('', CustomValidators.url)
    });
  }
}

#num=“ngModel” #max=“ngModel” #min=“ngModel”表示是在组件中配置的项目，然后在*ngIf中添加判断提醒。