首頁 >web前端 >js教程 >Angular模版驅動表單方法詳解

Angular模版驅動表單方法詳解

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

這次帶給大家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中文网其它相关文章!

推荐阅读:

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

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

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn