[Angualr 2] Using FormBuilder
There are two main functions we’ll use on FormBuilder:
• control - creates a new Control
• group - creates a new ControlGroup
import {Component, bootstrap, View} from "angular2/angular2";
import {FORM_DIRECTIVES, FormBuilder, ControlGroup} from "angular2/angular2"; @Component({
selector: 'demo-form-sku-builder'
})
@View({
directives: [FORM_DIRECTIVES],
template: `
<div>
<h2>Demo Form: Sku with Builder</h2>
<form [ng-form-model]="myForm"
(submit)="onSubmit(myForm.value)">
<div class="form-group">
<label for="skuInput">SKU</label>
<input type="text"
class="form-control"
id="skuInput2"
placeholder="SKU2"
[ng-form-control]="myForm.controls['sku2']">
<label for="skuInput">Demo</label>
<input type="text"
class="form-control"
id="demo"
placeholder="Demo"
[ng-form-control]="myForm.controls['demo']">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
`
})
export class DemoFormSkuBuilder {
myForm: ControlGroup;
constructor(fb: FormBuilder) {
this.myForm = fb.group({
"sku2": ["ABC123"],
"demo": ["I am demo"]
})
} onSubmit(value) {
console.log(value);
}
}
[Angualr 2] Using FormBuilder的更多相关文章
- [Angualr 2] Watch for changes
You can watch for form / control changes by using .valueChanges.observe({...}): this.sku.valueChange ...
- angualr Material Icons
首先需要项目引入 angualr meterial icons的资源库 图标资源链接 https://klarsys.github.io/angular-material-icons/ <md- ...
- 怎么使用formBuilder以拖拽方式编写页面
1.以admin用户登录系统,打开formbuilder http://localhost:8081/framework/main/formbuilder 2.从右方组件中,用鼠标拖拽页面所需的组件到 ...
- [Angular2 Form] Reactive Form, FormBuilder
Import module: import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/comm ...
- Angular2+之使用FormGroup、FormBuilder和Validators对象控制表单(取值、赋值、校验和是否可编辑等)
1.要使用Angular自带的表单控制需要先引入相关模块(.ts文件): import { FormGroup, //表单对象类 FormBuilder, //表单生成工具类 Validators} ...
- Laravel Form-builder使用
添加formbuilder插件: Composer应用 composer require kris/laravel-form-builder 下载成功 修改配置文件 在config/app.php ‘ ...
- angualr 实现tab选项卡功能
tab.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- ORACLE FormBuilder触发器执行顺序
1.当打开FORM时: (1)PRE-FORM (2)PRE-BLOCK(BLOCK级) (3)WHEN-NEW-FORM-INSTANCE (4)WHEN-NEW-BLOCK-INSTANCE (5 ...
- ng-clip angualr 的copy功能
每次写博客都想由衷的给我的老大膜拜一番!以前刚开始做angular的项目的时候就有说要有点击复制的功能因为当时菜啊,不懂啊.也就没做,今天老大又给了我一个资料!“ng-clip”.跟着老大最大的收获就 ...
随机推荐
- 泛型? extents super
?可以接受任何泛型集合,但是不能编辑集合值.所以一般只在方法参数中用 例子: ? extends Number 则类型只能是Number类的子孙类 ? super String 则类型只能是Str ...
- centos7上安装与配置Tomcat7(整理篇)
1.检查tomcat7是否已经安装 rpm -qa | grep tomcat ps -ef | grep tomcat 第一条命令查看是用rpm安装过tomcat,由于我们倾向于安装解压版的tomc ...
- ARM架构下linux设备树加载的方法
引入设备树后bootloader加载DTB方法: 1. 标准方法 将linux kernel放到内存地址为<kernel img addr>的内存中. 将DTB放到地址为<dtb a ...
- Bootstrap_Javascript_滚动监视器
滚动监控器是Bootstrap提供的非常实用的JavaScript插件,被广泛应用到Web开发中.其表现形式是: 1.当用户鼠标滚动时,滚动条的位置会自动更新导航条中相应的导航项. 2.用户拖动滚动条 ...
- Java 8 与 .Net的平台发展
从早期版本中,我们已经可以领略到一些令人兴奋的特性.但是开发真Andrew C.Oliver表示,尽管如此,Java语言在某些特性上还是落后于.Net.比如,Java 8 中最令人期待的Lambda表 ...
- 简单的html5 File base64 图片上传
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 简述一个javascript简单继承工具的实现原理
背景 由于本人非常希望能够开发自己的游戏,所以业余时间一直在想着能不能自己一些好玩又有趣的东西出来,最近随着steam上众多独立游戏的爆发,感觉自己又燃烧了起来,所以又拾起了很久以前的一个2d引擎,决 ...
- How do I solve the error: An error was encountered while running (Domain = LaunchServicesError, Code = 0) ?
How do I solve the error: An error was encountered while running (Domain = LaunchServicesError, Code ...
- ps批量修改图片
批量更改图片尺寸的ps脚本 高端干货!PHOTOSHOP实用脚本大合集
- JavaScript 资源装备
书籍 随着JS的普及,大家能获取到的JS书籍实在太多了,但是在我看来只有很少一部分JS书籍可以提供够新够有意思的内容.以下是我看过之后,觉得很值得推荐给大家的: JavaScript高级程序设计 作者 ...