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.
- [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 ...
- [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 ...
- 从零开始构建 Wijmo & Angular 2 小应用
中秋之际,Angular 团队发布 Angular 2 正式版,一款不错的图表控件Wijmo当天宣布支持 . Angular 2移除和替代了 Angular 1.X 中的 directives, co ...
- 来自 Thoughtram 的 Angular 2 系列资料
Angular 2 已经正式 Release 了,Thoughtram 已经发布了一系列的文档,对 Angular 2 的各个方面进行深入的阐释和说明. 我计划逐渐将这个系列翻译出来,以便对大家学习 ...
- [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 ...
- Wijmo Angular 2 小应用
Wijmo & Angular 2 小应用 中秋之际,Angular 团队发布 Angular 2 正式版,一款不错的图表控件Wijmo当天宣布支持 . Angular 2移除和替代了 Ang ...
- [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 ...
- 支持Angular 2的表格控件
前端框架一直这最近几年特别火的一个话题,尤其是Angular 2拥有众多的粉丝.在2016年9月份Angular 2正式发布之后,大量的粉丝的开始投入到了Angular 2的怀抱.当然这其中也包括我. ...
- Angular 2的表格控件
Angular 2的表格控件 前端框架一直这最近几年特别火的一个话题,尤其是Angular 2拥有众多的粉丝.在2016年9月份Angular 2正式发布之后,大量的粉丝的开始投入到了Angular ...
随机推荐
- localhost能连接websocket 127.0.0.1 不能连接问题?
最近开发中遇到一个问题,就是有的浏览器电脑能连接websocket , 有的不能 , 有的能用localhost连接,有的能用127.0.0.1连接,这个问题很奇怪 提供一个很好测试websocket ...
- Ext.js 之MVC
Ext.js 4.0之MVC
- 【spring源码学习】Spring @PostConstruct和@PreDestroy实例
在Spring中,既可以实现InitializingBean和DisposableBean接口或在bean配置文件中指定 init-method 和 destroy-method 在初始化和销毁回调函 ...
- 【转】foxmail邮箱我已进清理了为什么还是说我的邮箱已满
原文网址:http://zhidao.baidu.com/link?url=YmX_tBenMVsCopjljd80e2Jwvh7H8GnVSrDLeKKBNQkh_Ty50IsX5eAIy4P_64 ...
- Phonegap Online和Offline
1. 增加插件 cordova plugin add cordova-plugin-network-information 2. 增加事件监听 document.addEventListener(&q ...
- 移动端开发之px,em和rem详解
px:表示的是绝对的像素值,1px就是1像素大小 em:关于em,网上有资料说是关于父元素的,但是其实个人感觉这种说法是不对的,其实em的大小是根据自身的font-size确定的,而只是正常的情况下子 ...
- USACO 2016 January Contest, Gold解题报告
1.Angry Cows http://www.usaco.org/index.php?page=viewproblem2&cpid=597 dp题+vector数组运用 将从左向右与从右向左 ...
- MySQL性能调优 – 你必须了解的15个重要变量
1.DEFAULT_STORAGE_ENGINE 如果你已经在用MySQL 5.6或者5.7,并且你的数据表都是InnoDB,那么表示你已经设置好了.如果没有,确保把你的表转换为InnoDB并且设置d ...
- [Java.web]MVC 案例-开发用户模块(注册)
代码下载 生成后的 user.xml 路径在 X:\day09_user\WebRoot\WEB-INF\classes\users.xml 使用测试 在 day09 项目上右键 -> Run ...
- 【BZOJ】1756: Vijos1083 小白逛公园(线段树)
题目 传送门:QWQ 分析 线段树维护一下最大子序列 维护一下最大前缀 最大后缀 区间和 就ok了 好像只能用结构体..... 代码 #include <bits/stdc++.h> u ...