angular 表单

官网总结

链接地址：angular 表单
github例子：github例子

1. 响应式表单和模板驱动表单

1.1 两者区别

模块驱动表单：
基于FormsModules，通过ngModule进行数据双向绑定。

1.2 模板驱动表单

1.2.1 heroForm 变量是一个到 [NgForm] 指令的引用，它代表该表单的整体。

<form #heroForm="ngForm">

1.2.2 使用 ngModel 进行双向数据绑定

<input type="text" class="form-control" id="name" 
    required
    [(ngModel)]="model.name" name="name"
    #name="ngModel">

1.2.3 通过 ngModel 跟踪修改状态与有效性验证

状态	为真时的 CSS 类	为假时的 CSS 类
控件被访问	ng-touched	ng-untouched
控件的值变化	ng-dirty	ng-pristine
控件的值有效	ng-valid	ng-invalid

css样式

.ng-valid[required], .ng-valid.required  {
  border-left: 5px solid #42A948; /* green */
}
.ng-invalid:not(form)  {
  border-left: 5px solid #a94442; /* red */
}

可以借助 ng-invalid 类来给出有用的提示
创建了名叫 name 的变量，并且赋值为 "ngModel"
往这个组件中传入全新（空）的英雄，或者无效的英雄时，显示错误信息

<div class="form-group">
  <label for="name">Name</label>
  <input type="text" class="form-control" id="name" 
    required
    [(ngModel)]="model.name" name="name"
    #name="ngModel">
  <div [hidden]="name.valid || name.pristine" 
    class="alert alert-danger">
    Name is required.
  </div>
</div>

heroForm.reset()重置表格，将表格初始化为空

<button type="button" class="btn btn-default" 
  (click)="newHero();heroForm.reset()">New Hero</button>

1.2.4 使用 ngSubmit 提交该表单
把该表单的 ngSubmit 事件属性绑定到英雄表单组件的 onSubmit() 方法上
type 值 (type="submit")，就会触发表单提交

<form (ngSubmit)="onSubmit()" #heroForm="ngForm">
//...
<button type="submit" class="btn btn-success ml10"
   [disabled]="!heroForm.form.valid">Submit</button>
</form>

1.3 响应式表单