Angular5小結 -- 模板驅動表單

涉及用戶輸入

• 用模版引用

#template

代替$event

• enter輸入觸發：用

keyup.enter

代替 keycode檢測

摸板驅動表單

• 建立：使用

<form #heroForm="ngForm">

形式，ngForm是Angular提供的。表單中使用_[(ngModel)]_時，必需要定義_name_屬性，每一個 input 元素都有name屬性，Angular 表單用它註冊控件 （注：在內部，Angular 建立了一些FormControl，並把它們註冊到NgForm指令，再將該指令附加到<form>標籤。 註冊每一個FormControl時，使用name屬性值做爲鍵值。本章後面會討論NgForm。）

• 校驗：Angular賦予的用於表單校驗css類：訪問（ng-touched ng-untouched） 變化（ng-dirty ng-pristine）有效（ ng-valid ng-invalid）。在錯誤提示信息中，使用

#name = "ngModule"

設置錯誤提示模板引用，指令的 exportAs 屬性告訴 Angular 如何連接模板引用變量到指令。 這裏把name設置爲ngModel是由於ngModel指令的exportAs屬性設置成了 「ngModel」。例：

<div [hidden]="name.valid || name.pristine"
     class="alert alert-danger">
     Name is required
</div>

myForm.reset()

用於清除全部css狀態。

• 表單提交：

1. 在<form>標籤中綁定ngSubmit

<form (ngSubmit)="onSubmit()">

1. 提交按鈕做以下處理：

<button type="submit" class="btn btn-success" [disabled]="!heroForm.form.valid">Submit</button>