git clone https://github.com/Mavlarn/angular2-forms-tutorial

cd angular2-forms-tutorial
git checkout template-driven # 检出该文所使用的tag
npm install
npm start

import { FormsModule } from '@angular/forms';
//省略其他
@NgModule({
 imports: [ BrowserModule, FormsModule ],
 //省略其他
})

 姓名:
 
 电话:
 
 城市:
 
 街道:
 
 保存

  姓名:
  
    
  

ngForm

在上面的表单里，我们没有使用Angular2的任何功能，如数据绑定，也没有使用其他指令。但是，Angular2在

Call

  保存

这样，当用户点击保存按钮的时候，Angular2会使用自己的验证机制，验证所有的数据，然后在调用'logForm(userForm)'方法。

在我们的组件中，实现这个方法：

logForm(theForm: NgForm) {
  console.log(theForm.value);
  if (theForm.invalid) {
    // handle error.
  }
}

在这个方法里，我们使用theForm.invalid就可以获得这个表单是否验证成功的状态，也可以用'theForm.value'获得所有的表单数据。在这里，我们把表单数据打印到控制台来检查数据。至于如何从这个表单引用中获取控件数据和状态，会在接下来再讲。

使用ngModel绑定数据

接下来，我们需要绑定数据。假设我们的业务是打开这个页面的时候获取用户数据，然后显示到页面表单上。我们在组件的构造方法中创建一个模拟的用户数据：

export class TemplateFormsComponent {
  user: any;
  constructor() {
    this.user = {
      name: '张三',
      mobile: 13800138001,
      city: '北京',
      street: '朝阳望京...'
    };
  }
}

然后在模板中将这个组件中的数据绑定到模板页面上：

在这里，我们使用[(ngModel)]="user.name"，这是双向绑定的方式，这样，当我们修改页面上的数据的时候，在组件中也能获得更新后的数据；同时，如果在组件中更新了数据，在页面上也能更新。

为了演示这个双向绑定跟单向绑定的区别，我们只对姓名使用双向绑定，对其他的都是用单向绑定，也就是[ngModel]="user.mobile"。使用[]的单向绑定是从模板到组件的绑定，也就是页面中的输入的数据改变，组件中的数据也会改变。但是组件中的数据更新不会引起页面上该数据的更新。

使用单向绑定可以减少数据的更新检查，从来可以提高性能。

如果不需要数据的初始化，我们其实可以只用ngModel，例如：

这样，我们在组件中创建的用户数据就无法显示到页面上，但是，他还是能够将页面上输入的数据绑定到组件中的数据上。

在Angular2中，使用ngModel结合name属性来创建一个表单控件FormControls。例如上面的就对应一个userForm里面的控件city。由于我们在提交方法里面将这个userForm作为参数传到方法里，我们可以在方法里面获得所有的表单控件theForm.controls，它是一个Map类型的对象，key是所有的表单元素的name，值就是一个FormControl对象，里面保存着数据、和验证结果、是否修改等状态。也正是因为这些FormControls，我们才能够使用theForm.value的方式获取表单里的数据。当我们点击保存按钮的时候，就能在日志里面看到表单的数据：

{
  name: "张三",
  mobile: 13800138001,
  city: "北京",
  street: "朝阳望京..."
}

使用ngModelGroup分组显示

一般情况下，我们的model数据有可能是嵌套的，比如对于用户信息来说，城市和街道可能在一个地址对象address里，例如：

{
  name: "张三",
  mobile: 13800138001,
  address: {
    city: "北京",
    street: "朝阳望京..."
  }
}

对于这样的数据，我们就可以使用ngModelGroup来分组。模板就是这样：

 姓名:
 
 电话:
 
 
  城市:
  
  街道:
  
  保存
 

这样我们就把地址信息都封装到一个address对象里面。注意我们绑定的数据的结构也发生改变，这样，我们也需要修改我们的组件里面的用户数据：

export class TemplateFormsComponent {
  user: any;
  constructor() {
    this.user = {
      name: '张三',
      mobile: 13800138001,
      address: {
        city: '北京',
        street: '朝阳望京...'
      }
    };
  }
}

至此，我们的表单的基本功能就算完成了。我们在面板中创建了表单，在组件中初始化了用户数据，并显示到页面上，在页面上用ngModel，将页面上的数据更改绑定到组件上。同时，使用name属性，使得表单里面的所有数据都成为FormControl对象。在提交所调用的方法里，获得了表单的验证状态和数据。

表单控件的验证和状态

下一步，我们来添加数据验证，Angular2为我们提供了几种最基本的验证：

• required：表明该数据是必须的。

• minlength：设置该字段的长度的最小值，即使输入的是数字，也按照字符串来判断长度。

• maxlength：设置该字段的长度的最大值。

• pattern：使用正则表达式验证

在使用Angular的验证之前，我们首先需要关闭浏览器默认的验证，不然，如果某一个输入不合法，提交按钮就无法提交。我们在form里添加novalidate：

然后，我们对姓名输入框添加验证，并根据验证的结果显示不同的提示，同时，为了演示Angular2表单控件的特性，再添加几个提示，来显示该值的状态，代码如下：

未修改
已修改
有效

  姓名最小长度为3

  必须输入姓名