首頁 > 文章 > web前端 > Angular模版驅動表單方法詳解

Angular模版驅動表單方法詳解

php中世界最好的语言原創: 2018-05-12 14:46:031602瀏覽

這次帶給大家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指令，可以追蹤每個控制項的值和狀態(是否輸入過？是否校驗通過？的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;
 }

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

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

Angular模版驅動表單方法詳解

相關文章