angular2之ng2-validation学习-js教程-PHP中文网

angular2之ng2-validation学习

巴扎黑

发布： 2017-07-23 16:17:31

原创

1231人浏览过

最近在使用ng2做前端。发现表单验证这块除了官网上给的示例，验证required。其他的都要自己写逻辑来实现。开发起来不是很方便。所以在网上找了下ng2表单验证的资源，觉得ng2-validation不错。所以做的例子。以便以后使用，也怕时间久了忘脑后去。

示例代码链接

首先从npm包管理服务器上下载安装。

npm install ng2-validation --save

命令参数--save：使npm包信息保存在package.json文件的dependencies配置集合内。该集合是ng2正式运行的依赖集合。

登录后复制

使用方法

在模块文件内添加引用，一般为AppModule。

app.module.ts文件

import { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { FormsModule,ReactiveFormsModule }   from '@angular/forms';import { CustomFormsModule } from 'ng2-validation';import { AppComponent } from './app.component';import { AppTtemplateDrivenComponent } from './app-ttemplate-driven/app-ttemplate-driven.component';import { AppModelDrivenComponent } from './app-model-driven/app-model-driven.component';import { AppRoutingModule } from "app/app-routes.module";import { ValidationConfigModel } from "app/Models/validation";


@NgModule({
  declarations: [
    AppComponent,
    AppTtemplateDrivenComponent,
    AppModelDrivenComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,
    CustomFormsModule,
    ReactiveFormsModule
  ],
  providers: [ValidationConfigModel],
  bootstrap: [AppComponent]
})
export class AppModule { }

登录后复制

View Code

表单验证的使用方式有两种。可以灵活选择。两者混合使用我没研究。其实使用一种就足够了。

模板驱动（template driven）

GitHub上例子

<input><p>error message</p>

登录后复制

模型驱动（model driven）

GitHub上例子

<pre class="brush:php;toolbar:false"><span class="pl-ent"><span class="pl-e"><span class="pl-s"><span class="pl-pds"><span class="pl-pds"><span class="pl-e"><span class="pl-s"><span class="pl-pds"><span class="pl-pds">p <span style="color: #0000ff;">*</span><span class="pl-e"><span style="color: #0000ff;">ngIf=</span><span class="pl-s"><span class="pl-pds"><span style="color: #0000ff;">"demoForm.from.controls.field.errors?.rangeLength</span><span class="pl-pds"><span style="color: #0000ff;">"</span>&gt;error message<span class="pl-ent">p&gt;<br></span></span></span></span></span></span></span></span></span></span></span></span></span></span><span class="pl-k"><span class="pl-k"><span class="pl-en"><span class="pl-k">FormGroup需要在from的dom上添加formGroup驱动，否则验证不生效。<br></span></span></span></span>

登录后复制

<span class="pl-k"><span class="pl-k"><span class="pl-en"><span class="pl-k"> 下面是我的demo代码片段：<br>模板驱动app-ttemplate-driven.component.html<br></span></span></span></span>

登录后复制

<div>
  <form>
    <div>
      <label>长度要求</label>
      <input>
      <p>长度在5到9之间</p>
    </div>
    <div>
      <label>长度要求2</label>
      <input>
      <p>长度要求</p>
    </div>
    <div>
      <label>最小值</label>
      <input>
     <p>取值大于等于10</p>
    </div>
   <div>
     <label>大于</label>
     <input>
     <p>取值大于10</p>
   </div>
   <div>
     <label>大于等于</label>
     <input>
     <p>取值大于等于10</p>
   </div>
   <div>
     <label>最大值</label>
     <input>
     <p>最小值10</p>
   </div>
    <div>
     <label>小于</label>
     <input>
     <p>值小于10</p>
   </div>
   <div>
     <label>小于等于</label>
     <input>
     <p>值小于等于10</p>
   </div>
   <div>
     <label>取值范围</label>
     <input>
     <p>取值大于等于10到小于等于20</p>
   </div>
   <div>
     <label>数字</label>
     <input>
     <p>必须是uint</p>
   </div>
   <div>
     <label>数字</label>
     <input>
     <p>任何数字</p>
   </div>
   <div>
     <label>链接</label>
     <input>
     <p>合法的url</p>
   </div>
    <div>
     <label>邮箱</label>
     <input>
     <p>合法的邮箱地址</p>
   </div>
   <div>
     <label>日期</label>
     <input>
     <p>合法的日期</p>
   </div>
   <div>
     <label>uuid</label>
     <input>
     <p>不是合法的uuid</p>
   </div>
   <div>
     <label>电话</label>
     <input>
     <p>不是合法的电话号码</p>
   </div>
   <div>
     <label>两次相同</label>
     <input>
     <p>必填项</p>
     <input>
     <p>两次输入不一致</p>
   </div>
   <div>
     <label>相同</label>
     <input>
     <p>与值不相符</p>
   </div>
    <div>
     <label>复合条件</label>
     <input>
     <p>大于等于5，最大是10</p>
   </div>
    <button>Submit</button>
  </form>
</div>

登录后复制

View Code

 <br>

登录后复制

ts文件不需要做什么，所以就不贴了。

模型驱动
app-model-driven.component.ts

import { Component, OnInit } from '@angular/core';import { FormGroup, FormControl, Validators } from "@angular/forms";import { CustomValidators } from 'ng2-validation';

@Component({
  selector: 'app-app-model-driven',
  templateUrl: './app-model-driven.component.html',
  styleUrls: ['./app-model-driven.component.css']
})
export class AppModelDrivenComponent implements OnInit {public formGroup: FormGroup;
password:string="";
  constructor() { 
    let password = new FormControl('', [Validators.required]);
  let certainPassword = new FormControl('', CustomValidators.equalTo(password));this.formGroup = new FormGroup({
            field: new FormControl('',  CustomValidators.rangeLength([5, 9])),
            appGt:new FormControl('', CustomValidators.gt(10)),
            password:password,
            certainPassword:certainPassword,
            maxField:new FormControl('',[CustomValidators.gt(10),CustomValidators.max(20)])
        });
  }

  ngOnInit() {
  }
onSubmit(){}
}

登录后复制

View Code

app-model-driven.component.html

<div>
  <form>
    <div>
      <input>
      <p>长度在5到9之间</p>
      <p>{{validationForm2.form.controls.field.errors?.rangeLength}}</p>
    </div>
   <div>
      <input>
      <p>大于10</p>
    </div>
    <div>
      <input>
      <p>必填</p>
      <p>{{test.pristine}}</p>
      <input>
      <p>两次相同</p>
    </div>
    <div>
      <label>组合形式</label>
      <input>
     <p>取值大于等于10且小于20</p>
    </div>
    <button>Submit</button>
  </form>
</div>

登录后复制

View Code