Input handling is an important part of application development. The ng-model directive provided in Angular 1 is a great way to manage input, but we think we can do better. The new Angular Forms module is easier to use and reason about than ng-model, it provides the same conveniences as ng-model, but does not have its drawbacks. In this article we will talk about the design goals for the module and show how to use for common use cases.

Optimizing for real world apps

Let's look at what a simple HelloWorld example would look like in Angular 2:
 
@Component({
  selector: 'form-example'
})
@Template({
  // we are binding the input element to the control object
  // defined in the component's class 
  inline: `<input [control]="username">Hello {{username.value}}!`,
  directives: [forms]
})
class FormExample {
  constructor() {
    this.username = new Control('World');
  }
}
 
This example is written using TypeScript 1.5 that supports type and metadata annotations, but it can be easily written in ES6 or ES5. You can find more information on annotations here. The example also uses the new template syntax that you can learn about by watching the keynote Misko and Rado gave at NgConf.
 
And, for comparison sake, here's what we'd write in Angular 1:
 
var module = angular.module("example", []);
 
module.controller("FormExample", function() {
  this.username = "World";
});
 
<div ng-controller="FormExample as ctrl">
  <input ng-model="ctrl.username"> Hello {{ctrl.username}}!
</div>
 
At the surface Angular 1 example looks simpler that what we have just done in Angular 2. Let's talk about the challenges of Angular 1 approach with real world applications. 
  • You can not unit test the form behavior without compiling the associated template. This is because the template contains part of the application behavior.
  • Though you can do dynamically generated data-driven forms in Angular 1, it is not easy and we want to enable this as a core use case for Angular 2.
  • The ng-model directive was built using a generic two-way data-binding which makes it difficult to reason about your template statically. Will go into depth on this topic in a following blog post and describe how it lets us achieve significant performance improvements.
  • There was no concept of an atomic form which could easily be validated, or reverted to original state.
Although Angular 2 uses an extra level of indirection, it grants major benefits. The control object decouples form behavior from the template, so that you can test it in isolation. Tests are simpler to write and faster to execute. 
 
Now let's look at a more complex example so that you can see some of these properties.

Forms Mental Model

In Angular 2 working with Forms is broken down to three layers. At the very bottom we can work with HTML elements. On top of that Angular 2 provides the Form Controls API which we have shown in the example above. Finally, Angular 2 will also provide a data-driven forms API which will make building large-scale forms a snap.

 
Let's look at how this extra level of indirection benefits us for more realistic examples.

Data-Driven Forms

Let's say we would like to build a form such as this:
 
 
We will have an object model of an Address which needs to be presented to the user. The requirements also include providing correct layout, labels, and error handling. We would write it like this in Angular 2. 
 
(This is proposed API, we would love to take your input on this.)
 
import {forms, required, materialDesign} from 'angular2/forms';
 
// Our model
class Address {
  street: string;
  city: string;
  state: string;
  zip: string;
  residential: boolean;
 
@Component({
  selector: 'form-example'
})
@Template({
  // Form layout is automatic from the structure
  inline: `<form [form-structure]=”form”></form>`
  directives: [forms]
})
class FormExample {
  constructor(fb: FormBuilder) {
    this.address = new Address();
 
    // defining a form structure and initializing it using 
    // the passed in model
    this.form = fb.fromModel(address, [
      // describe the model field, labels and error handling
      {field: 'street', label: 'Street', validator: required},
      {field: 'city', label: 'City', validator: required},
      {field: 'state', label: 'State', size: 2, 
              validator: required},
      {field: 'zip', label: 'Zip', size: 5, 
              validator: zipCodeValidator},
      {field: 'isResidential', type: 'checkbox', 
              label: 'Is residential'}
    }, {
      // update the model every time an input changes
      saveOnUpdate: true,
      // Allow setting different layout strategies
      layoutStrategy: materialDesign
    });
  }
}
 
function zipCodeValidator(control) {
  if (! control.value.match(/\d\d\d\d\d(-\d\d\d\d)?/)){
    return {invalidZipCode: true};
  }
}
 
The above example shows how an existing model Address can be turned into a form. The process include describing the fields, labels, and validators in a declarative way in your component. The form HTML structure will be generated automatically based on the layout strategy provided to the builder. This helps keeping consistent look & feel through the application. Finally, it is also possible to control the write through behavior, which allows atomic writes to the model. 
 
We have taken great care to ensure that the forms API is pluggable, allowing you to define custom validators, reuse web-component controls, and define layout and theme.

Form Controls

Although having data driven forms is convenient, sometimes you would like to have full control of how a form is laid out on page. Let's rebuild the same example using the lower level API, which allows you to control the HTML structure in full detail. (This works today in Angular 2 Alpha, but we are also happy to receive your input on improvements we could make.)
 
import {forms, required} from 'angular2/forms';
 
// An example of typical model
class Address {
  street: string;
  city: string;
  state: string;
  zip: string;
  residential: boolean;
 
function zipCodeValidator(control) {
  if (! control.value.match(/\d\d\d\d\d(-\d\d\d\d)?/)){
    return {invalidZipCode: true};
  }
}
 
@Component({
  selector: 'form-example'
})
@Template({
  inline: `
    // explicitly defining the template of the form 
    <form [form]=”form”>
      Street <input control="street">
      <div *if="form.hasError('street', 'required')">Required</div>
 
      City <input control="city">
      <div *if="form.hasError('city', 'required')">Required</div>
 
      State <input control="state" size="2">
      <div *if="form.hasError('state', 'required')">Required</div>
 
      Zip <input control="zip" size="5">
      <div *if="form.hasError('zip', 'invalidZipCoed')">
        Zip code is invalid
      </div>
 
      Residential <input control="isResidential" type="checkbox">
    </form> 
  `
  directives: [forms]
})
class FormExample {
  constructor(fb: FormBuilder) {
    this.address = new Address();
 
    // defining a form model 
    this.form = fb.group({
      street: [this.address.street, required],
      city: [this.address.city, required],
      state: [this.address.city, required],
      zip: [this.address.zip, zipCodeValidator],
      isResidential: [this.address.isResidential]
    });
 
    this.form.changes.forEach(() => this.form.writeTo(this.address));
  }
}
 
When using the control form API we still define the behavior of the form in the component, but the way the form is laid out is defined in the template. This allows you to implement even the most unusual forms. 

Summary

The new Angular 2 Forms module makes building forms easier than ever. It also adds benefits such as consistent look and feel for all forms in your application, easier unit testing, and more predictable behavior.
 
The API is still work in progress, we welcome any feedback. Please submit your input by filing issues or creating PRs at http://github.com/angular/angular.

Forms in Angular 2的更多相关文章

  1. [Angular] Create a custom validator for reactive forms in Angular

    Also check: directive for form validation User input validation is a core part of creating proper HT ...

  2. [Angular] Create a custom validator for template driven forms in Angular

    User input validation is a core part of creating proper HTML forms. Form validators not only help yo ...

  3. 从零开始构建 Wijmo & Angular 2 小应用

    中秋之际,Angular 团队发布 Angular 2 正式版,一款不错的图表控件Wijmo当天宣布支持 . Angular 2移除和替代了 Angular 1.X 中的 directives, co ...

  4. 来自 Thoughtram 的 Angular 2 系列资料

    Angular 2 已经正式 Release 了,Thoughtram 已经发布了一系列的文档,对 Angular 2 的各个方面进行深入的阐释和说明. 我计划逐渐将这个系列翻译出来,以便对大家学习 ...

  5. [Angular2 Form] Create and Submit an Angular 2 Form using ngForm

    Forms in Angular 2 are essentially wrappers around inputs that group the input values together into ...

  6. Wijmo Angular 2 小应用

    Wijmo & Angular 2 小应用 中秋之际,Angular 团队发布 Angular 2 正式版,一款不错的图表控件Wijmo当天宣布支持 . Angular 2移除和替代了 Ang ...

  7. [AngularJS] Isolate State Mutations in Angular Components

    Managing state is one of the hardest things to do in any application. Angular 2 tackles this problem ...

  8. 支持Angular 2的表格控件

    前端框架一直这最近几年特别火的一个话题,尤其是Angular 2拥有众多的粉丝.在2016年9月份Angular 2正式发布之后,大量的粉丝的开始投入到了Angular 2的怀抱.当然这其中也包括我. ...

  9. Angular 2的表格控件

    Angular 2的表格控件 前端框架一直这最近几年特别火的一个话题,尤其是Angular 2拥有众多的粉丝.在2016年9月份Angular 2正式发布之后,大量的粉丝的开始投入到了Angular ...

随机推荐

  1. Ambiguous reference to member 'dataTask(with:completionHandle:)'错误

    在研究IOS的网络请求过程中,因为NSURLConnection已经过时,需要引用到URLSession var url:NSURL=NSURL(string: "http://3g.163 ...

  2. String.valueof;和String = ""+1;的区别

    关于字符串的+操作,单纯的String  s ="" +11;编译器会看做常量""和常量11的拼接操作,常量计算最快:String.valueOf会调用方法,速 ...

  3. Flash 开发环境搭建和文字滚动效果实例

    Flash 开发环境搭建和文字滚动效果实例 一.Flash 开发环境搭建 Flash发布的时候可以将资源(即将库中的元件)集成到swf运行文件中.Flash没有代码自动输入补全功能,因此需要一个英文一 ...

  4. LCD的接口类型详解

    LCD的接口有多种,分类很细.主要看LCD的驱动方式和控制方式,目前手机上的彩色LCD的连接方式一般有这么几种:MCU模式,RGB模式,SPI模式,VSYNC模式,MDDI模式,DSI模式.MCU模式 ...

  5. python 书籍推荐 二

    Python是一中面向对象的编程语言,语法简洁而清晰,具有丰富和强大的类库.对于初学编程者来说,首选Python是个非常棒的选择.   工具/原料 Python Python学习前的准备 1 学习任何 ...

  6. Non-standard evaluation, how tidy eval builds on base R

    As with many aspects of the tidyverse, its non-standard evaluation (NSE) implementation is not somet ...

  7. 远程连接Linux虚拟机上的mysql失败的解决方法

    今天在虚拟机Ubuntu上折腾了一晚上mysql,然后试着用java连接,搞了很久都没成功,但是同学配好的Debian上却连接成功了,也就是说我的配置有问题. 折腾了很久,最后还是通过理解异常信息来大 ...

  8. 关于 ImageLoader 说的够细了。。。

    简介ImageLoader(一) 分类: android 开源及第三方项目2014-05-30 12:14 14126人阅读 评论(0) 收藏 举报 ImageLoader 使用该开源项目的之前,先给 ...

  9. XSS获取cookie并利用

    获取cookie利用代码cookie.asp <html> <title>xx</title> <body> <%testfile = Serve ...

  10. IE11浏览器卸载

    点击卸载程序,然后选择查看已安装的更新. 在当前安装的更新里找到IE11的更新,然后直接右击卸载:这里告诉大家一小窍门哈,我们在搜索栏输入IE就会查找更新啦,不用一个一个去找的哦. 卸载完我们重启一下 ...