效果图
官方参考文档:https://github.com/yuyang0410...
注意:
验证是在组件重定义的变量,然后通过界面中的 #username="ngModel"这个样式来验证的,和[(ngModel)]="username"无关
提交按钮可以设置如果验证不通过,就处于只读状态
<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('',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('',sex: new FormControl('',Validators.required),position: new FormControl('',CustomValidators.range([2,habby: new FormControl('',50])),CustomValidators.phone("zh-CN")),email: new FormControl('',CustomValidators.email),url: new FormControl('',CustomValidators.url) }); } }
#num=“ngModel” #max=“ngModel” #min=“ngModel”表示是在组件中配置的项目,然后在*ngIf中添加判断提醒。