Angular2 Forms

Import to learn Forms is to understand the following concept

FormGroups
FormControls

Angular Form Model

　　FormsModule

　　 It is default forms module, if create a new form without specify the formGroup, will assign this to the form. ngModel is to create a formControl to the form.

　　ReactiveFormsModule

　　　Using FormBuilder to build the forms by ourselves.

　　Validators

Explicitly validators is coming from Validator

　　 Custom validators by return

{ [s: string]: boolean }

Following is brainstorm

时间： 2024-12-07 09:29:10

Angular2 Forms的相关文章

Angular2组件开发—调用服务（二）

注入 - Injector 在前一节的示例代码中,组件EzAlgo直接在构造函数中实例化了一个EzAlog对象,这造成了EzApp和EzAlgo的强耦合,我们可以使用Angular2的注入器/Injector进行解耦: 注入器就像婚姻介绍所,男方在婚介所登记心仪的女性特点,约好见面地点,然后, 坐等发货即可.比如上图: EzApp组件(男方)使用Component注解的Injector属性向Angular2框架(婚介所)声明其依赖于EzAlgo(登记心仪的女性特点),并在其构造函数的参数表中使用

Angular2组件开发—调用服务（一）

服务 - 封装可复用代码在Angular2中,服务用来封装可复用的功能性代码.比如Http服务,封装了ajax请求的细节,在不同的组件中,我们只需要调用Http服务的API接口就可以给组件增加ajax请求的功能了: Angular2中实现一个服务非常简单直接 : 定义一个类,然后,它就是服务了: 1 class EzAlgo{ 2 add(a,b){return a+b;} 3 sub(a,b){return a-b;} 4 } 上面的代码定义了一个相当弱智的算法服务EzAlgo,它有两个AP

Angular2组件开发—表单输入（五）

NgFormModel - 绑定已有控件组 NgFormModel指令类似于NgControlGroup指令,都是为控件提供容器.但区别在于,NgFormModel指令将已有的控件组绑定到DOM对象上: 1 @View({ 2 template : ` 3  4 <div [ng-form-model]="controls"> 5 <input type="text" ng-control="

Angular2组件开发—表单输入（四）

NgFormControl - 绑定已有控件对象与NgControlName指令不同,NgFormControl将已有的控件/Control对象绑定到DOM元素上.当需要对输入的值进行初始化时,可以使用NgFormControl指令. 下面的代码中,使用NgFormControl指令将DOM元素绑定到组件EzComp的成员变量movie上,我们需要在构造函数中先创建这个Control对象: 1 @View({ 2 //将输入元素绑定到已经创建的控件对象上 3 template : `<in

Angular2组件开发—表单输入（三）

NgControlGroup - 命名控件组 NgControlGroup指令的选择符是[ng-control-group],如果模板中的某个元素具有这个属性, Angular2框架将自动创建一个控件组对象,并将这个对象以指定的名称与DOM对象绑定. 控件组可以嵌套,方便我们在语义上区分不同性质的输入: 和NgControlName指令一样,NgControlGroup指令也必须作为NgForm或NgFormModel的后代使用,因为这个指令需要将创建的控件组对象添加到祖先(NgForm或Ng

AngularJS2.0 一个表单例子——总体说来还是简化了1.x 使用起来比较自然

<!doctype html> <html> <head> <meta charset="utf-8"> <title>NgForm</title> <script type="text/javascript" src="lib/[email protected]"></script> <script type="text/javasc

[Angular2 Form] Use RxJS Streams with Angular 2 Forms

Angular 2 forms provide RxJS streams for you to work with the data and validity as it flows out of the forms. These streams allow you handle complex scenarios and asynchronous scenarios with relative ease. This example shows you how to log out the va

[Angular2 Form] Create Radio Buttons for Angular 2 Forms

Using Radio Buttons in Angular 2 requires a basic understanding of forms as well as how their labels will match up with each input. This lesson shows how to use *ngFor with radio buttons and covers the quirks of the id property and forattributes as w

[Angular2 Form] Build Select Dropdowns for Angular 2 Forms

Select Dropdowns in Angular 2 a built with select and option elements. You use *ngFor to loop through your values and create options and use ngModel to keep track of the value as it changes. <form #formRef="ngForm"> <select name="l