Angular模版驅動表單方法詳解

這次帶給大家Angular模版驅動表單方法詳解，Angular模版驅動表單的注意事項有哪些，以下就是實戰案例，一起來看一下。

取得使用者輸入

<p>
 </p><h1 id="Angular表单">Angular表单</h1>
 

  

       

  

      

  

   登录   

 

假如有以上簡單表單，先不論優劣，有哪些方式可以取得表單資料呢？先看兩個簡單粗暴的

1）事件$event的方式

在監聽事件的時候，將整個事件載重$event 傳遞到事件處理函數，它會攜帶觸發元素的各種資訊。這裡監聽form元素的submit事件，將整個form的資訊傳給處理函數，並列印出來

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

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

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

2) 模版引用變數

Angular中可以用 模版引用變數(#var)來引用DOM元素/Angular元件/指令。通常模版引用變數就是代表宣告的那個元素，當然也可以修改指向，可以代表Angular指令(例如後續用到的ngForm指令和ngModel指令)。

// 模版引用变量代表Form元素

// 模版引用变量代表ngForm指令

從下圖可以看到不同，第一個和$event.target一樣，是DOM元素；第二個是ngForm指令，可以追蹤每個控制項的值和狀態(是否輸入過？是否校驗通過？的value，而不需要傳遞整個元素訊息。這種方式也不好，必須透過事件觸發才可以傳遞

  

       

注意：模版引用變數的作用域

是整個模版，所以在同一個模版中，不能有同名的模版引用變數

這兩種獲取表單資料的方式只是了解下，因為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指令 -->
 

  

                      

       

    用户名不能为空！     用户名只能包含英文或数字！   

  

      

  

   密码不能为空！   

  

       登录   

 

通过Angular css 自动添加的class来控制表单样式

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

查看下效果，表单校验、样式反馈、按钮状态管理、数据获取都很方便。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

动态加载JS文件三种方式总结

js支持post请求的跨域方法总结

以上是Angular模版驅動表單方法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！