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>