[Angular 2] A Simple Form in Angular 2
When you create a Form in Angular 2, you can easily get all the values from the Form using ControlGroup and Controls.
- Bind [ng-form-model] to the <form>
- form bind to ControlGoup
- Bind [ng-form-control] to the <input>
- input bind to Gontrol
- import {Component, View, FORM_DIRECTIVES, ControlGroup, Control} from 'angular2/angular2';
- @Component({
- selector: 'field-form'
- })
- @View({
- directives: [FORM_DIRECTIVES],
- template: `
- <form [ng-form-model]="johnform">
- Title: <input type="checkbox" ng-control="title">
- Action: <input type="checkbox" ng-control="action">
- </form>
- `
- })
- export class FieldForm {
- johnform = new ControlGroup({
- title: new Control(true),
- action: new Control(true)
- });
- get selectedField(){
// return ['title', 'action']- return Object.keys(this.johnform.controls)
- .filter((key)=>{
- return this.johnform.controls[key].value;
- })
- }
- }
----------------------
- import {Component, View, NgFor, FORM_DIRECTIVES} from 'angular2/angular2';
- import {TodoService} from './todoService';
- import {TodoItemRender} from './todoItemRender';
- import {StartsWith} from './startsWith';
- import {SimpleSearch} from './simpleSearch';
- import {LetterSelect} from './letterSelect';
- import {TodoSearch} from './todoSearch';
- import {FieldForm} from './fieldForm';
- @Component({
- selector: 'todo-list'
- })
- @View({
- pipes: [StartsWith, SimpleSearch],
- directives: [NgFor, TodoItemRender, FORM_DIRECTIVES, LetterSelect, TodoSearch, FieldForm],
- template: `
- <div>
- <field-form #field-form></field-form>
- <todo-search #todo-search></todo-search>
- {{todoSearch.term}}
- <todo-item-render
- *ng-for="#todo of todoService.todos
- | simpleSearch: fieldForm.selectedField : todoSearch.term"
- [todoinput]="todo"
- >
- </todo-item-render>
- </div>
- {{fieldForm.selectedField | json}}
- `
- })
[Angular 2] A Simple Form in Angular 2的更多相关文章
- [Angular] Implement a custom form component by using control value accessor
We have a form component: <label> <h3>Type</h3> <workout-type formControlName=& ...
- Angular项目构建指南 - 不再为angular构建而犹豫不决(转)
如果你不知道什么是Angular或者根本没听说过,那么我接下来所说的对你来说毫无益处,不过如果你打算以后会接触Angular或者干脆要涨涨姿势~读下去还是有点用的. Angular和它之前所出现的其余 ...
- [Angular 2 Router] Configure Your First Angular 2 Route
Using the Angular 2 router requires defining routes, passing them in to the RouterModule.forRoot and ...
- 【Angular专题】——(1)Angular,孤傲的变革者
目录 一. 漫谈Angular 二. 如果你还在使用Angularjs 三. 我计划这样学习Angular技术栈 一. 漫谈Angular Angular,来自Google的前端SPA框架,与Reac ...
- [Angular] Use Angular components in AngularJS applications with Angular Elements
When migrating AngularJS (v1.x) applications to Angular you have different options. Using Angular El ...
- Angular 从入坑到挖坑 - Angular 使用入门
一.Overview angular 入坑记录的笔记第一篇,完成开发环境的搭建,以及如何通过 angular cli 来创建第一个 angular 应用.入坑一个多星期,通过学习官方文档以及手摸手的按 ...
- [从 0 开始的 Angular 生活]No.38 实现一个 Angular Router 切换组件页面(一)
前言 今天是进入公司的第三天,为了能尽快投入项目与成为团队可用的战力,我正在努力啃官方文档学习 Angular 的知识,所以这一篇文章主要是记录我如何阅读官方文档后,实现这个非常基本的.带导航的网页应 ...
- [AngularJS] Angular 1.3 $submitted for Form in Angular
AngularJS 1.3 add $submitted for form, so you can use $submitted to track whether the submit event ...
- [Angular2 Form] Angular 2 Template Driven Form Custom Validator
In this tutorial we are going to learn how we can also implement custom form field validation in Ang ...
随机推荐
- Oracle_Flashback_技术_总结
Oracle Flashback 技术 总结 Flashback 技术是以Undo segment中的内容为基础的, 因此受限于UNDO_RETENTON参数.要使用flashback 的特性,必须启 ...
- Java基础--多线程的方方面面
1,什么是线程?线程和进程的区别是什么? 2,什么是多线程?为什么设计多线程? 3,Java种多线程的实现方式是什么?有什么区别? 4,线程的状态控制有哪些方法? 5,线程安全.死锁和生产者--消费者 ...
- 再谈CMake与RPATH
之前写过一篇<探讨CMake中关于RPATH的使用>,只要针对的方面是在编译生成之后(不包括安装的make install)如何去除RPATH的问题.今天给大家主要介绍一下如何让CMake ...
- TCP/IP-入门
Life is not a rehearsal "人生没有彩排" 参考资料:TCP/IP入门经典 (第五版) TCP/IP详解 卷一:协议 一.什么是TCP/IP TCP/IP是一 ...
- jQuery 图片轮播
HTML <div class="carousel"> <ul class="car-img"> <li> ...
- strtolower() strtoupper()等字符串大小写转换函数
$str = "Mary Had A Little Lamb and She LOVED It So"; string strtolower ( string $str )— 将字 ...
- python使用platform模块获取系统环境并去除换行符
近来在porting一个网站,企图拿到这个网站的数据来做分析.为了支持多系统环境的正常运行.需要知道当前系统环境的是什么OS? 1.python内置platform库.可以很方便得到当前系统环境时什么 ...
- JS键盘的键码(event.keyCode)
keycode 8 = BackSpace BackSpace keycode 9 = Tab Tab keycode 12 = Clear keycode 13 = Enter keycode 16 ...
- Ajax表单提交插件jquery form
jQuery Form插件是一个优秀的Ajax表单插件,我们可以非常容易的使用它处理表单控件的值,清空和复位表单控件,附件上传,以及完成Ajax表单提交. jQuery Form有两个核心方法ajax ...
- 改进基于Boost.Asio的聊天服务
Boost.Asio是个非常易用的C++异步网络库,官方文档中一个示例是聊天服务,分为chat_message.chat_client.chat_server三个部分.chat_server的启动代码 ...