详解Angular2表单-模板驱动的表单(Template-Driven Forms)

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

<form>
 <label>姓名:</label>
 <input type="text">
 <label>电话:</label>
 <input type="text">
 <label>城市:</label>
 <input type="text">
 <label>街道:</label>
 <input type="text">
 <button type="submit">保存</button>
</form>

<div class="form-group">
  <label class="col-sm-2 control-label">姓名:</label>
  <div class="col-sm-10">
    <input class="form-control" type="text">
  </div>
</div>

<input #phone placeholder="phone number">
<button (click)="callPhone(phone.value)">Call</button>

<form #userForm="ngForm">

<form #userForm="ngForm" (ngSubmit)="logForm(userForm)">
  <button type="submit">保存</button>
</form>

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: '朝阳望京...'
    };
  }
}

<input type="text" name="name" [(ngModel)]="user.name">
<input type="text" name="mobile" [ngModel]="user.mobile">
<input type="text" name="city" [ngModel]="user.city">
<input type="text" name="street" [ngModel]="user.street">
<!-- 其他的输入框都类似 -->

<input type="text" name="city" ngModel>

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

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

<form #userForm="ngForm" (ngSubmit)="logForm(userForm)">
 <label>姓名:</label>
 <input type="text" name="name" [(ngModel)]="user.name">
 <label>电话:</label>
 <input type="text" name="mobile" [ngModel]="user.mobile">
 <fieldset ngModelGroup="address">
  <label>城市:</label>
  <input type="text" name="city" [ngModel]="user.address.city">
  <label>街道:</label>
  <input type="text" name="street" [ngModel]="user.address.street">
  <button type="submit">保存</button>
 </fieldset>
</form>

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

<form #userForm="ngForm" (ngSubmit)="logForm(userForm)" novalidate>

<input type="text" name="name" [(ngModel)]="user.name" #name="ngModel" required minlength="3">
<span *ngIf="name.pristine" class="label label-primary">未修改</span>
<span *ngIf="name.dirty" class="label label-warning">已修改</span>
<span *ngIf="name.valid" class="label label-success">有效</span>
<div [hidden]="name.valid || name.pristine" class="alert alert-danger">
  <p *ngIf="name.errors">姓名最小长度为3</p>
  <p *ngIf="name.errors">必须输入姓名</p>
</div>

<input type="text" name="mobile" [ngModel]="user.mobile" required minlength="11" maxlength="11">
<span *ngIf="userForm.controls.mobile" class="label label-primary">未修改</span>
<span *ngIf="userForm.controls.mobile" class="label label-warning">已修改</span>
<span *ngIf="userForm.controls.mobile" class="label label-success">有效</span>
<div [hidden]="userForm.controls.mobile" class="alert alert-danger">
  <p *ngIf="userForm.controls.mobile">电话长度必须为11</p>
  <p *ngIf="userForm.controls.mobile">必须输入电话</p>
</div>

userForm.controls.mobile"htmlcode">

userForm.controls.mobile"text-align: center">

所以，我们只需要定义相关的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添加了一个提交方法:


<form #userForm="ngForm" (ngSubmit)="logForm(userForm)" novalidate>


然后在组件中，这个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方法。


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




<button (click)="reset(userForm)">重置</button>


然后在组件里：


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


注意我们需要让这个方法返回false，这样他就不会触发submit的方法。
在官方的文档中，还提供了另一种技巧来实现这种重置，就是在form上使用ngIf：


<form #userForm="ngForm" (ngSubmit)="logForm(userForm)" novalidate *ngIf="active">


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


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


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


这也是一种小窍门，可以在某些情况下使用。
总结
至此，有关模板驱动的表单的基本用法大致完成，再总结一下模板驱动的表单的基本特性：

  
所有的表单控件的定义都在模板里
  
所有的验证器都在模板里面添加
  
表单数据的状态、验证结果都在模板上通过判断表单里面控件数据的状态来显示
  
如果需要测试这部分的代码，需要使用e2e（端到端）测试，也就是在浏览器里面

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。