angular学习笔记—表单

angular有两种表单：模板驱动表单和响应式表单。

模板驱动表单：

        顾名思义，模板驱动表单是在视图层面创建和管理表单控件，一般不需要在模型层面对表单进行控制。angular会自动将数据与表单控件绑定，并监听值的变化，类型于黑箱操作。

        官网示例：

<form (ngSubmit)="onSubmit()" #heroForm="ngForm">
      <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>
      ...
</form>

根据官网示例可以看到，创建模板驱动表单很简单，首先在form标签中将ngForm赋给自定义的模板引用变量#heroForm