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 ],
 //省略其他
})

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

  姓名:
  
    
  

Call

  保存

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

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

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

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

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

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

未修改
已修改
有效

  姓名最小长度为3

  必须输入姓名

首先，我们在input上添加了2个验证，required和minlength="3"。

其次，我们使用#name="ngModel"创建了一个模板引用变量，这样我们在下面就可以使用name来获取这个表单控件（FormControl）的引用。表单控件有一些属性，如pristine, dirty, valid, touched，这几个都是状态类型，表示某一种状态是否为真。除此以外还有控件的值可以用name.value获取。最后，还有验证的错误信息结果，会放在name.errors里。

在上面的代码里，我们用未修改，在控件值未被修改的时候，显示一个lebel。同样，在被修改、验证有效的时候显示相应的标签。

最后，所有的验证结果的错误信息会保存在name.errors里，如果没有数据验证错误，这个errors值就是null，所以，在上面的代码里，我们用name.errors?.minlength，这表示，如果errors不为null，而且errors.minlength也不为空的时候，才显示里面的信息。

我们可以看到，表单控件的验证会将验证器的名字作为key放在errors里面，对应的值是true。我们就是用这个特性，来根据控件验证的不同结果，来显示友好的错误信息。

如果运行我们的实例，可以发现，对于姓名，如果清空它的值，发现只有一个错误信息，就是必须输入姓名。你可能会觉得，这时候，值为空，那他的长度也小于3，那么minlength这个错误也应该被检测到才对，但是实际上，遇到第一个错误以后，就没有其他的验证。

在上面姓名输入框上，我们使用#name="ngModel"创建了一个模板引用变量，然后在接下来的模板里面使用它获得表单控件。实际上，我们也可以直接使用之前定义的对ngForm的引用，来获得这个表单里所有控件的状态。例如，对电话，我们使用下面的方式：

未修改
已修改
有效

  电话长度必须为11

  必须输入电话

在这里，我们没有获取对mobile的模板引用，而是用ngForm的引用获得：

userForm.controls.mobile?.pristine

当获取验证错误结果时:

userForm.controls.mobile?.errors?.minlength

注意这里在mobile上就使用?是因为，在使用ngIf渲染页面上的元素的时候，这个表单控件还没有初始化完成，如果不加这个?，就会出现错误。

根据验证状态定义样式

Angular的表单验证，除了在控件上的数据以外，它还会根据状态在控件所在的html元素上添加css样式：

所以，我们只需要定义相关的css，就可以实现根据状态显示不同的效果。

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

结合各种css的选择器，我们就可以根据表单控件的状态实现各种显示的样式。

在组件中获取表单控件数据

最后，我们再看看怎样在组件中获取这些控件的状态和结果，在上面，我们给ngForm添加了一个提交方法:

然后在组件中，这个logForm(userForm)方法如下：

logForm(theForm: NgForm) {
  if (theForm.invalid) {
    if (theForm.controls['name'].errors) {
      this.nameErrorMsg = 'name error:' + JSON.stringify(theForm.controls['name'].errors);
    } else {
      this.nameErrorMsg = null;
    }
  }
  console.log(theForm.value);
}

在这个方法里，theForm就是ngForm的模板引用实例，类型是NgForm的。

如果表单验证有失败，theForm.invalid就是false。

theForm.controls就是这个表单里的所有控件，如果想获取姓名的验证结果，就是theForm.controls['name'].errors。

用这种方式，我们就可以在组件中获取所有表单控件的数据、验证状态、错误信息等。

重置表单

一般情况下，如果是新建用户信息，我们需要在保存成功以后，清空当前数据，重置表单的状态，等待用户重新输入。如果我们只是清空数据，这时候那些验证错误就会被检测到，我们我们需要将表单控件也都重置成未修改状态。这在Angular2里很简单，它提供了一个reset方法。

我们在里面添加一个重置按钮：

重置

然后在组件里：

reset(theForm: NgForm) {
  theForm.reset();
  return false;
}

注意我们需要让这个方法返回false，这样他就不会触发submit的方法。

在官方的文档中，还提供了另一种技巧来实现这种重置，就是在form上使用ngIf：

只有在active为true时这个表单才会创建。

然后在重置的时候，设置这个active为false，这样这个表单就会被销毁，然后用setTimeout的方式再设置它为true，这个表单就会重新创建，这样就实现了重置的效果。

reset() {
  this.user = { // 重置用户数据
    address: {}
  };
  this.active = false;
  setTimeout(() => this.active = true, 0);
  return false;
}

感谢各位的阅读！关于“Angular2如何实现模板驱动的表单”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！