背景：

為天臺(tái)等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及天臺(tái)網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、天臺(tái)網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

     最近在itoo頁(yè)面調(diào)整的時(shí)候，發(fā)現(xiàn)頁(yè)面表單或者是文本框沒(méi)有做基本的判斷操作，所以著手demo一篇，希望對(duì)大家有幫助??！

--------------------------------------------------------------------------------

1.創(chuàng)建表單組件：

ng g c login1

2.1單規(guī)則驗(yàn)證：

用戶名：
 
 {{userNameRef.valid}}

--------------------------------------------------------------------------------

效果：

2.2.多規(guī)則驗(yàn)證：（不能為空，用戶名和密碼的長(zhǎng)度）

 用戶名：
 
 {{userNameRef.valid}}

錯(cuò)誤原因提示方式：

 用戶名：
 
 {{userNameRef.errors|json}}
 
this is required
should be 3 chacaters

效果：

###：初始化，沒(méi)有輸入數(shù)據(jù)：

###：輸入數(shù)據(jù)，但是長(zhǎng)度小于3：

###：合法輸入：

  當(dāng)然這里有一個(gè)問(wèn)題，就是合法的時(shí)候usernameRef.errors=null,但是用戶看起來(lái)不太美觀，所以就需要判斷當(dāng)usernameRef.errors=null的時(shí)不出現(xiàn)：

{{userNameRef.errors|json}}

具體實(shí)例登陸代碼：

 

  用戶名：
  

   
   
用戶名必須輸入！
  
 
 

  密碼：
  

   
   
密碼必須輸入,至少要8位！
  
 
 

  

   登錄
  
 

login.component:

import { Component, OnInit} from '@angular/core';
import{UserModel} from '../model/user.model';//引入了usermodel
@Component({
 selector: 'app-login',
 templateUrl: './login.component.html',
 styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
 constructor() { }
 //定義user為Usermodel
 private user=new UserModel();
 ngOnInit() {
 }
/**
 * 登陸事件
 * @param form 表單中的輸入值
 */
 submit(form){
 if(form.username=="1"&&form.password=="12345678"){
  alert("登錄成功了");
 }else{
  alert("非法用戶");
 }
 }
}

3.userModel：

export class UserModel{
 userName:string;
 password:string;
}

效果：

1.未填時(shí)點(diǎn)擊登陸：

2.輸入登陸：

3.非法用戶： 

總結(jié)

以上所述是小編給大家介紹的Angular4表單驗(yàn)證代碼詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！