Angular模版驅(qū)動表單的使用總結(jié)
表單的重要性就不多說了，Angular支持表單的雙向數(shù)據(jù)綁定，校驗，狀態(tài)管理等，總結(jié)下。
獲取用戶輸入
<div class="container-fluid login-page">
<h1>Angular表單</h1>
<form class="login-area">
<div class="form-group">
<input class="form-control" type="text" name="name" id="login-name" placeholder="請輸入登錄帳號">
</div>
<div class="form-group">
<input class="form-control"type="password" name="pwd" id="login-pwd" placeholder="請輸入登錄密碼">
</div>
<div class="form-group">
<button type="submit" class="btn btn-block btn-success">登錄</button>
</div>
</form>
</div>
假如有以上簡單表單，先不論優(yōu)劣，有哪些方式可以獲取到表單數(shù)據(jù)呢？ 先看兩種簡單粗暴的
1）事件$event的方式
在監(jiān)聽事件的時候，將整個事件載荷 $event 傳遞到事件處理函數(shù)，它會攜帶觸發(fā)元素的各種信息。這里監(jiān)聽form元素的submit事件，將整個form的信息傳給處理函數(shù)，并打印出來
<form class="login-area" (submit)="testInput($event)">
testInput ( _input: any) {
console.dir(_input);
}
觸發(fā)submit后，查看結(jié)果。非常眼熟，就是傳統(tǒng)方式中的event嘛，后面就不用多說了，target即為form元素，再定位到input子元素，分別獲取value即可。
為了獲取input的Value，我們傳遞了非常多的無用信息，處理函數(shù)根本就不關(guān)心元素的位置，屬性等等，它只需要value值。所以這種方式不可取
2) 模版引用變量
Angular中可以用 模版引用變量(#var)來引用DOM元素/Angular組件/指令。通常模版引用變量就是代表聲明的那個元素，當(dāng)然也可以修改指向，可以代表Angular指令(比如后續(xù)用到的ngForm指令和ngModel指令)。
// 模版引用變量代表Form元素 <form class="login-area" #test (submit)="testInput(test)"> // 模版引用變量代表ngForm指令 <form class="login-area" #test="ngForm"(submit)="testInput(test)">
從下圖可以看到不同，第一個和$event.target一樣，是DOM元素；第二個是ngForm指令，可以跟蹤每個控件的值和狀態(tài)(是否輸入過？是否校驗通過？等等)，后續(xù)會詳細(xì)說
所以當(dāng)我們直接用模版引用變量引用input元素時，就可以直接在模版中傳遞input元素的value，而不需要傳遞整個元素信息。這種方式也不好，必須要通過事件觸發(fā)才可以傳遞
<form class="login-area" (submit)="testInput(test.value)">
<div class="form-group">
<input class="form-control" #test type="text" name="name" id="login-name" placeholder="請輸入登錄帳號">
</div>
注意：模版引用變量的作用域是整個模版，所以在同一個模版中，不能有同名的模版引用變量
這兩種獲取表單數(shù)據(jù)的方式只是了解下，因為Angular提供了兩種更好的構(gòu)建表單的方式---模版驅(qū)動表單和模型驅(qū)動表單
模版驅(qū)動表單
顧名思義，是使用 HTML模版 + 表單專業(yè)指令 來構(gòu)建表單。使用模版驅(qū)動表單，記得要先在應(yīng)用模塊中import FormsModule。說明以下幾點：
1、模版驅(qū)動表單使用 [(ngModel)] 語法進行雙向數(shù)據(jù)綁定，非常簡單就可以把表單數(shù)據(jù)綁定到模型中。注意在表單中使用[ngModel]時，必須要定義name屬性，因為Angular在處理表單時，會創(chuàng)建一些FormControl，用來跟蹤單個表單控件的值和狀態(tài)，而表單控件name屬性就是鍵值，所以必須要指定name屬性。(這應(yīng)該算是指出了獲取表單數(shù)據(jù)的兩種科學(xué)的方式：[ngModel]語法綁定 和 通過formControl的Api獲取)
2、使用 ngForm指令，來監(jiān)聽整個表單的有效性(valid屬性)。Angular會自動為form表單自動創(chuàng)建并添加ngForm指令，直接使用即可
3、使用ngModel指令，來監(jiān)聽單個表單控件的狀態(tài)，還會使用特定的Angular css來更新控件樣式 ，我們可以通過這些class來控制不同狀態(tài)時，表單控件的展示
4、表單驗證可以使用 HTML原生的表單驗證屬性(required , pattern , max , min 等等) ，驗證出錯時，3中提到的errors屬性就會有對應(yīng)的錯誤項；
還可以自定義驗證器，因為模版驅(qū)動表單不直接訪問FormControl實例，所以需要把自定義的驗證器用指令包裝。
通過以下栗子來展示模版驅(qū)動表單簡單使用
<!-- 模版引用變量指向ngForm指令 -->
<form class="login-area" #testform="ngForm" (submit)="testInput()">
<div class="form-group">
<!-- ngModel綁定數(shù)據(jù) -->
<!-- required 和 pattern 指定校驗規(guī)則 -->
<!-- 模版引用變量指向ngModel指令 -->
<input class="form-control" type="text" name="name" id="login-name" placeholder="請輸入登錄帳號"
[(ngModel)] = "user.name"
required
pattern="[0-9A-z]+"
#nameinput = "ngModel"
>
</div>
<!-- 通過表單控件的狀態(tài)控制是否展示錯誤說明及展示何種錯誤說明 -->
<div class="form-group" *ngIf="nameinput.touched&&nameinput.invalid">
<span class="error-info" *ngIf="nameinput.errors?.required">用戶名不能為空！</span>
<span class="error-info" *ngIf="nameinput.errors?.pattern">用戶名只能包含英文或數(shù)字！</span>
</div>
<div class="form-group">
<input class="form-control" type="password" name="pwd" id="login-pwd" placeholder="請輸入登錄密碼"
[(ngModel)] = "user.pwd"
required
#pwdinput = "ngModel">
</div>
<div class="form-group" *ngIf="pwdinput.touched&&pwdinput.invalid">
<span class="error-info" *ngIf="pwdinput.errors?.required">密碼不能為空！</span>
</div>
<div class="form-group">
<!-- 通過表單的狀態(tài)控制按鈕是否可用 -->
<button type="submit" class="btn btn-block btn-success" [disabled]="testform.invalid">登錄</button>
</div>
</form>
通過Angular css 自動添加的class來控制表單樣式
input.ng-invalid.ng-touched{
border: 2px solid red;
}
查看下效果，表單校驗、樣式反饋、按鈕狀態(tài)管理、數(shù)據(jù)獲取都很方便。
至于如何自定義驗證器會和模型驅(qū)動表單的自定義驗證器一起說明，那就是下一篇了；隨筆中有不足的歡迎大家指正···
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Angular中ng-options下拉數(shù)據(jù)默認(rèn)值的設(shè)定方法
本篇文章主要介紹了Angular中ng-options下拉數(shù)據(jù)默認(rèn)值的設(shè)定方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了angularjs中的單元測試實例,本文主要說說利用karma和jasmine來進行ng模塊的單元測試,需要的朋友可以參考下2014-12-12
這篇文章主要為大家詳細(xì)介紹了AngularJS過濾器的使用方法，感興趣的小伙伴們可以參考一下2016-03-03
這篇文章主要介紹了AngularJS入門教程（二）：AngularJS模板,本文是系列文章的第三篇,本系列會用一個項目來講解AngularJS的使用,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了angularJS中$apply()方法詳解,需要的朋友可以參考下2015-01-01
AngularJS基礎(chǔ) ng-copy 指令實例代碼
本文主要介紹AngularJS ng-copy 指令,這里幫大家整理了ng-copy指令的基礎(chǔ)資料,并附有示例代碼和效果圖,有需要的朋友參考下2016-08-08
本篇文章主要介紹了淺談angular4實際項目搭建總結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
本篇文章主要介紹了Angular整合zTree的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
angularJs自定義過濾器實現(xiàn)手機號信息隱藏的方法
今天小編就為大家分享一篇angularJs自定義過濾器實現(xiàn)手機號信息隱藏的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
Angular4學(xué)習(xí)教程之HTML屬性綁定的方法
這篇文章主要給大家介紹了關(guān)于Angular4學(xué)習(xí)教程之HTML屬性綁定的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01