點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

怎樣操作Angular模版驅動表單

來源：懂視網責編：小采時間：2020-11-27 19:42:57

怎樣操作Angular模版驅動表單

怎樣操作Angular模版驅動表單:這次給大家帶來怎樣操作Angular模版驅動表單，操作Angular模版驅動表單的注意事項有哪些，下面就是實戰案例，一起來看一下。表單的重要性就不多說了，Angular支持表單的雙向數據綁定，校驗，狀態管理等，總結下。獲取用戶輸入<p class="

推薦度：

點擊下載本文 文檔為doc格式

導讀怎樣操作Angular模版驅動表單:這次給大家帶來怎樣操作Angular模版驅動表單，操作Angular模版驅動表單的注意事項有哪些，下面就是實戰案例，一起來看一下。表單的重要性就不多說了，Angular支持表單的雙向數據綁定，校驗，狀態管理等，總結下。獲取用戶輸入<p class="

這次給大家帶來怎樣操作Angular模版驅動表單，操作Angular模版驅動表單的注意事項有哪些，下面就是實戰案例，一起來看一下。

表單的重要性就不多說了，Angular支持表單的雙向數據綁定，校驗，狀態管理等，總結下。

獲取用戶輸入

<p class="container-fluid login-page">
 <h1>Angular表單</h1>
 <form class="login-area">
 <p class="form-group">
 <input class="form-control" type="text" name="name" id="login-name" placeholder="請輸入登錄帳號">
 </p>
 <p class="form-group">
 <input class="form-control"type="password" name="pwd" id="login-pwd" placeholder="請輸入登錄密碼">
 </p>
 <p class="form-group">
 <button type="submit" class="btn btn-block btn-success">登錄</button>
 </p>
 </form>
</p>

假如有以上簡單表單，先不論優劣，有哪些方式可以獲取到表單數據呢？先看兩種簡單粗暴的

1）事件$event的方式

在監聽事件的時候，將整個事件載荷 $event 傳遞到事件處理函數，它會攜帶觸發元素的各種信息。這里監聽form元素的submit事件，將整個form的信息傳給處理函數，并打印出來

<form class="login-area" (submit)="testInput($event)">

testInput ( _input: any) {
 console.dir(_input);
}

觸發submit后，查看結果。非常眼熟，就是傳統方式中的event嘛，后面就不用多說了，target即為form元素，再定位到input子元素，分別獲取value即可。

為了獲取input的Value，我們傳遞了非常多的無用信息，處理函數根本就不關心元素的位置，屬性等等，它只需要value值。所以這種方式不可取

2) 模版引用變量

Angular中可以用模版引用變量(#var)來引用DOM元素/Angular組件/指令。通常模版引用變量就是代表聲明的那個元素，當然也可以修改指向，可以代表Angular指令(比如后續用到的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指令，可以跟蹤每個控件的值和狀態(是否輸入過？是否校驗通過？等等)，后續會詳細說

所以當我們直接用模版引用變量引用input元素時，就可以直接在模版中傳遞input元素的value，而不需要傳遞整個元素信息。這種方式也不好，必須要通過事件觸發才可以傳遞

 <form class="login-area" (submit)="testInput(test.value)">
 <p class="form-group">
 <input class="form-control" #test type="text" name="name" id="login-name" placeholder="請輸入登錄帳號">
 </p>

注意：模版引用變量的作用域是整個模版，所以在同一個模版中，不能有同名的模版引用變量

這兩種獲取表單數據的方式只是了解下，因為Angular提供了兩種更好的構建表單的方式---模版驅動表單和模型驅動表單

模版驅動表單

顧名思義，是使用 HTML模版 + 表單專業指令來構建表單。使用模版驅動表單，記得要先在應用模塊中import FormsModule。說明以下幾點：

1、模版驅動表單使用 [(ngModel)] 語法進行雙向數據綁定，非常簡單就可以把表單數據綁定到模型中。注意在表單中使用[ngModel]時，必須要定義name屬性，因為Angular在處理表單時，會創建一些FormControl，用來跟蹤單個表單控件的值和狀態，而表單控件name屬性就是鍵值，所以必須要指定name屬性。(這應該算是指出了獲取表單數據的兩種科學的方式：[ngModel]語法綁定和通過formControl的Api獲取)

2、使用 ngForm指令，來監聽整個表單的有效性(valid屬性)。Angular會自動為form表單自動創建并添加ngForm指令，直接使用即可

3、使用ngModel指令，來監聽單個表單控件的狀態，還會使用特定的Angular css來更新控件樣式，我們可以通過這些class來控制不同狀態時，表單控件的展示　

4、表單驗證可以使用 HTML原生的表單驗證屬性(required , pattern , max , min 等等) ，驗證出錯時，3中提到的errors屬性就會有對應的錯誤項；

還可以自定義驗證器，因為模版驅動表單不直接訪問FormControl實例，所以需要把自定義的驗證器用指令包裝。

通過以下栗子來展示模版驅動表單簡單使用

<!-- 模版引用變量指向ngForm指令 -->
 <form class="login-area" #testform="ngForm" (submit)="testInput()">
 <p class="form-group">
 <!-- ngModel綁定數據 -->
 <!-- required 和 pattern 指定校驗規則 -->
 <!-- 模版引用變量指向ngModel指令 -->
 <input class="form-control" type="text" name="name" id="login-name" placeholder="請輸入登錄帳號"
 [(ngModel)] = "user.name" 
 required
 pattern="[0-9A-z]+"
 #nameinput = "ngModel"
 >
 </p>
 <!-- 通過表單控件的狀態控制是否展示錯誤說明及展示何種錯誤說明 -->
 <p 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">用戶名只能包含英文或數字！</span>
 </p>
 <p class="form-group">
 <input class="form-control" type="password" name="pwd" id="login-pwd" placeholder="請輸入登錄密碼"
 [(ngModel)] = "user.pwd"
 required
 #pwdinput = "ngModel">
 </p>
 <p class="form-group" *ngIf="pwdinput.touched&&pwdinput.invalid">
 <span class="error-info" *ngIf="pwdinput.errors?.required">密碼不能為空！</span>
 </p>
 <p class="form-group">
 <!-- 通過表單的狀態控制按鈕是否可用 -->
 <button type="submit" class="btn btn-block btn-success" [disabled]="testform.invalid">登錄</button>
 </p>
 </form>

通過Angular css 自動添加的class來控制表單樣式

input.ng-invalid.ng-touched{
 border: 2px solid red;
 }

查看下效果，表單校驗、樣式反饋、按鈕狀態管理、數據獲取都很方便。

相信看了本文案例你已經掌握了方法，更多精彩請關注Gxl網其它相關文章！

怎樣操作Angular模版驅動表單

推薦度：

點擊下載本文 文檔為doc格式

標簽：如何使用使用表單

熱門焦點

怎樣操作Angular模版驅動表單

怎樣操作Angular模版驅動表單

怎樣操作Angular模版驅動表單

最新推薦

猜你喜歡

熱門推薦