angular2表單驗證之ng2-validation學習

来源:http://www.cnblogs.com/xuduo/archive/2017/07/10/7146707.html
-Advertisement-
Play Games

最近在使用ng2做前端。發現表單驗證這塊除了官網上給的示例，驗證required。其他的都要自己寫邏輯來實現。開發起來不是很方便。所以在網上找了下ng2表單驗證的資源，覺得ng2-validation不錯。所以做的例子。以便以後使用，也怕時間久了忘腦後去。 示例代碼鏈接 首先從npm包管理伺服器上下 ...


最近在使用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 type="text" [(ngModel)]="model.field" name="field" #field="ngModel" [rangeLength]="[5, 9]"/>
<p *ngIf="field.errors?.rangeLength">error message</p>
模型驅動（model driven） GitHub上例子 
export class AppComponent {
    form: FormGroup;

    constructor() {
        this.form = new FormGroup({
            field: new FormControl('', CustomValidators.range([5, 9]))
        });
    }
}

<input type="text" formControlName="field"/>
<p *ngIf="demoForm.from.controls.field.errors?.rangeLength">error message</p>
FormGroup需要在from的dom上添加formGroup驅動，否則驗證不生效。
　　<form [formGroup]="formGroup" (ngSubmit)="onSubmit()" #validationForm2="ngForm" > 
 下麵是我的demo代碼片段：
模板驅動app-ttemplate-driven.component.html
<div class="container">
  <form (ngSubmit)="onSubmit()" #validationForm="ngForm">
    <div class="form-group">
      <label for="appField">長度要求</label>
      <input type="text" required class="form-control" name="appField" [(ngModel)]="model.appField" #rangeLength="ngModel" [rangeLength]="[5, 9]">
      <p [hidden]="rangeLength.valid||rangeLength.pristine">長度在5到9之間</p>
    </div>
    <div class="form-group">
      <label for="appField2">長度要求2</label>
      <input type="text"  class="form-control" name="appField2" [(ngModel)]="model.appField2" #rangeLength2="ngModel" [rangeLength]="[0,5]">
      <p [hidden]="rangeLength2.valid||rangeLength2.pristine">長度要求</p>
    </div>
    <div class="form-group">
      <label for="appMin">最小值</label>
      <input type="number"  class="form-control" name="appMin" [(ngModel)]="model.appMin"  #appMin="ngModel" [min]="10" />
     <p [hidden]="appMin.valid||appMin.pristine">取值大於等於10</p>
    </div>
   <div class="form-group">
     <label for="appGt">大於</label>
     <input type="number" class="form-control" name="appGt" [(ngModel)]="model.appGt" #appGt="ngModel" [gt]="10" />
     <p [hidden]="appGt.valid||appGt.pristine">取值大於10</p>
   </div>
   <div class="form-group">
     <label for="appGte">大於等於</label>
     <input type="number" class="form-control" name="appGte" [(ngModel)]="model.appGte" #appGte="ngModel" [gte]="10" />
     <p [hidden]="appGte.valid||appGte.pristine">取值大於等於10</p>
   </div>
   <div class="form-group">
     <label for="appMax">最大值</label>
     <input type="number" class="form-control" name="appMax" [(ngModel)]="model.appMax" #appMax="ngModel" [max]="10" />
     <p [hidden]="appMax.valid||appMax.pristine">最小值10</p>
   </div>
    <div class="form-group">
     <label for="appLt">小於</label>
     <input type="number" class="form-control" name="appLt" [(ngModel)]="model.appLt" #appLt="ngModel" [lt]="10" />
     <p [hidden]="appLt.valid||appLt.pristine">值小於10</p>
   </div>
   <div class="form-group">
     <label for="appLte">小於等於</label>
     <input type="number" class="form-control" name="appLte" [(ngModel)]="model.appLte" #appLte="ngModel" [lte]="10" />
     <p [hidden]="appLte.valid||appLte.pristine">值小於等於10</p>
   </div>
   <div class="form-group">
     <label for="appRange">取值範圍</label>
     <input type="number" class="form-control" name="appRange" [(ngModel)]="model.appRange" #appRange="ngModel" [range]="[10, 20]" />
     <p [hidden]="appRange.valid||appRange.pristine">取值大於等於10到小於等於20</p>
   </div>
   <div class="form-group">
     <label for="appDigits">數字</label>
     <input type="text" class="form-control" name="appDigits" [(ngModel)]="model.appDigits" #appDigits="ngModel" digits />
     <p [hidden]="appDigits.valid||appDigits.pristine">必須是uint</p>
   </div>
   <div class="form-group">
     <label for="appNumber">數字</label>
     <input type="text" class="form-control" name="appNumber" [(ngModel)]="model.appNumber" #appNumber="ngModel" number />
     <p [hidden]="appNumber.valid||appNumber.pristine">任何數字</p>
   </div>
   <div class="form-group">
     <label for="appUrl">鏈接</label>
     <input type="text" class="form-control" name="appUrl" [(ngModel)]="model.appUrl" #appUrl="ngModel" url />
     <p [hidden]="appUrl.valid||appUrl.pristine">合法的url</p>
   </div>
    <div class="form-group">
     <label for="appEmail">郵箱</label>
     <input type="text" class="form-control" name="appEmail" [(ngModel)]="model.appEmail" #appEmail="ngModel" email />
     <p [hidden]="appEmail.valid||appEmail.pristine">合法的郵箱地址</p>
   </div>
   <div class="form-group">
     <label for="appDate">日期</label>
     <input type="text" class="form-control" name="appDate" [(ngModel)]="model.appDate" #appDate="ngModel" date />
     <p [hidden]="appDate.valid||appDate.pristine">合法的日期</p>
   </div>
   <div class="form-group">
     <label for="appUuid">uuid</label>
     <input type="text" class="form-control" name="appUuid" [(ngModel)]="model.appUuid" #appUuid="ngModel" uuid="'all'" />
     <p [hidden]="appUuid.valid||appUuid.pristine">不是合法的uuid</p>
   </div>
   <div class="form-group">
     <label for="appPhone">電話</label>
     <input type="text" class="form-control" name="appPhone" [(ngModel)]="model.appPhone" #appPhone="ngModel" phone="CN" />
     <p [hidden]="appPhone.valid||appPhone.pristine">不是合法的電話號碼</p>
   </div>
   <div class="form-group">
     <label >兩次相同</label>
     <input class="form-control"  type="password" ngModel name="appPassword" #appPassword="ngModel" required/>
     <p [hidden]="appPassword.valid||appPassword.pristine">必填項</p>
     <input class="form-control"  type="password" ngModel name="appCertainPassword" #appCertainPassword="ngModel" [equalTo]="appPassword"/>
     <p [hidden]="appCertainPassword.valid||appCertainPassword.pristine">兩次輸入不一致</p>
   </div>
   <div class="form-group">
     <label for="appEqual">相同</label>
     <input type="text" class="form-control" name="appEqual" [(ngModel)]="model.appEqual" #appEqual="ngModel" [equal]="'哈哈'" />
     <p [hidden]="appEqual.valid||appEqual.pristine">與值不相符</p>
   </div>
    <div class="form-group">
     <label for="appComplex">複合條件</label>
     <input type="number" class="form-control" name="appComplex" [(ngModel)]="model.appComplex" #appComplex="ngModel" [gte]="5" [max]="10"  />
     <p [hidden]="appComplex.valid||appComplex.pristine">大於等於5，最大是10</p>
   </div>
    <button type="submit" [disabled]="!validationForm.form.valid" class="btn btn-default">Submit</button>
  </form>
</div>
View Code

 

 

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 class="container">
  <form [formGroup]="formGroup" (ngSubmit)="onSubmit()" #validationForm2="ngForm" >
    <div class="form-group" >
      <input class="form-control" name="field"  type="text"  formControlName="field"/>
      <p *ngIf="validationForm2.form.controls.field.errors?.rangeLength">長度在5到9之間</p>
      <p>{{validationForm2.form.controls.field.errors?.rangeLength}}</p>
    </div>
   <div class="form-group" >
      <input class="form-control" name="appGt" type="number"  formControlName="appGt"/>
      <p *ngIf="validationForm2.form.controls.appGt.errors?.gt">大於10</p>
    </div>
    <div class="form-group" >
      <input class="form-control" name="password" type="password" [(ngModel)]="password" formControlName="password"/>
      <p *ngIf="validationForm2.form.controls.password.errors?.required">必填</p>
      <p>{{test.pristine}}</p>
      <input class="form-control" type="password" formControlName="certainPassword"/>
      <p *ngIf="validationForm2.form.controls.certainPassword.errors?.equalTo">兩次相同</p>
    </div>
    <div class="form-group" >
      <label for="appMin">組合形式</label>
      <input type="number"  class="form-control" name="appMin" formControlName="maxField" />
     <p [hidden]="!validationForm2.form.controls.maxField.errors?.max &&!validationForm2.form.controls.maxField.errors?.gt">取值大於等於10且小於20</p>
    </div>
    <button type="submit" [disabled]="!validationForm2.form.valid" class="btn btn-default">Submit</button>
  </form>
</div>
View Code

 

 
 

 

 

 
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • myBati初學
    創建資料庫（y2165） MyBatis環境搭建1.在pom.xml引入依賴2.得替換build節點，為了讓程式編譯在main中所有子包下的配置文件3.構建大配置，位於resources<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE configura ...
  • Angular使用ngrx 【附源碼】
    ngrx 是 Angular框架的狀態容器，提供可預測化的狀態管理。 1.首先創建一個可路由訪問的模塊 這裡命名為：DemopetModule。 包括文件：demopet.html、demopet.scss、demopet.component.ts、demopet.routes.ts、demopet ...
  • 自定義事件解決重覆請求BUG
    現在，組件化開發還是比較流行的，畢竟其優點相當突出。最近在開發一個組件的時候，遇到了一個很有意思的BUG。。。 BUG的背景 最近在開發一個組件，好不容易開發好了轉測試。然後，測試給我提了一個這樣的bug，orz... 因為是一個組件，最大的好處就是可以隨處復用，隨處使用，然而，當一個頁面用了多個組 ...
  • let和const
    let / var 可以重覆聲明 let 有塊級作用域 沒有前置功能 不能重覆聲明 / var a=1; console.log(a);//1 let b=2; console.log(b);//2 if(a==1){ var z=2; } console.log(z);//2 / if(a1==1 ...
  • ES6 scope(作用域)
    ES6 scope(作用域) 作用域 : 1.全局作用域(global) 2.函數作用域(function) 全局作用域 var a=1; console.log(a);//1 //{}表示語句塊 if(a==1){ var b=2; console.log(b);//2 } console.log ...
  • js中var、let、const的區別
    js中var、let、const的區別 主要內容是：js中三種定義變數的方式const， var， let的區別。 var定義的變數可以修改，如果不初始化會輸出undefined，不會報錯。 var分為兩種：局部作用域和函數作用域 let是塊級作用域，函數內部使用let定義後，對函數外部無影響。 l ...
  • 使用Vue2.X和Webpack2.X開發SPA應用 - 環境構建篇
    [TOC] 1、開發環境準備 1.1 安裝nodejs 首先安裝Nodejs，直接去nodejs官網下載https://nodejs.org/en/，預設會安裝Npm，所以這裡可以不用單獨安裝。 1.2 使用淘寶Npm鏡像 由於國內網路原因，如果直接使用Npm安裝依賴包會因為網路和牆的原因導致不成功 ...
  • 你不知道的javaScript筆記(5)
    原生函數 常用的原生函數 String() Number() Boolean() Array() Object() Function() RegExp() Date() Error() Symbol() 內部屬性 [Class] 所有typeof 返回值為object 的對象都包含一個內部屬性[Cl ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類