涉及用户输入
- 用模版引用
#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状态。
- 表单提交:
- 在<form>标签中绑定ngSubmit
<form (ngSubmit)="onSubmit()">
- 提交按钮作如下处理:
<button type="submit" class="btn btn-success" [disabled]="!heroForm.form.valid">Submit</button>