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
  1. import {Component, View, FORM_DIRECTIVES, ControlGroup, Control} from 'angular2/angular2';
  2.  
  3. @Component({
  4. selector: 'field-form'
  5. })
  6. @View({
  7. directives: [FORM_DIRECTIVES],
  8. template: `
  9. <form [ng-form-model]="johnform">
  10. Title: <input type="checkbox" ng-control="title">
  11. Action: <input type="checkbox" ng-control="action">
  12. </form>
  13. `
  14. })
  15.  
  16. export class FieldForm {
  17. johnform = new ControlGroup({
  18. title: new Control(true),
  19. action: new Control(true)
  20. });
  21.  
  22. get selectedField(){
         // return ['title', 'action'] 
  23. return Object.keys(this.johnform.controls)
  24. .filter((key)=>{
  25. return this.johnform.controls[key].value;
  26. })
  27. }
  28. }

----------------------

  1. import {Component, View, NgFor, FORM_DIRECTIVES} from 'angular2/angular2';
  2. import {TodoService} from './todoService';
  3. import {TodoItemRender} from './todoItemRender';
  4. import {StartsWith} from './startsWith';
  5. import {SimpleSearch} from './simpleSearch';
  6. import {LetterSelect} from './letterSelect';
  7. import {TodoSearch} from './todoSearch';
  8. import {FieldForm} from './fieldForm';
  9.  
  10. @Component({
  11. selector: 'todo-list'
  12. })
  13. @View({
  14. pipes: [StartsWith, SimpleSearch],
  15. directives: [NgFor, TodoItemRender, FORM_DIRECTIVES, LetterSelect, TodoSearch, FieldForm],
  16. template: `
  17. <div>
  18. <field-form #field-form></field-form>
  19. <todo-search #todo-search></todo-search>
  20. {{todoSearch.term}}
  21. <todo-item-render
  22. *ng-for="#todo of todoService.todos
  23. | simpleSearch: fieldForm.selectedField : todoSearch.term"
  24. [todoinput]="todo"
  25. >
  26. </todo-item-render>
  27. </div>
  28. {{fieldForm.selectedField | json}}
  29. `
  30. })

[Angular 2] A Simple Form in Angular 2的更多相关文章

  1. [Angular] Implement a custom form component by using control value accessor

    We have a form component: <label> <h3>Type</h3> <workout-type formControlName=& ...

  2. Angular项目构建指南 - 不再为angular构建而犹豫不决(转)

    如果你不知道什么是Angular或者根本没听说过,那么我接下来所说的对你来说毫无益处,不过如果你打算以后会接触Angular或者干脆要涨涨姿势~读下去还是有点用的. Angular和它之前所出现的其余 ...

  3. [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 ...

  4. 【Angular专题】——(1)Angular,孤傲的变革者

    目录 一. 漫谈Angular 二. 如果你还在使用Angularjs 三. 我计划这样学习Angular技术栈 一. 漫谈Angular Angular,来自Google的前端SPA框架,与Reac ...

  5. [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 ...

  6. Angular 从入坑到挖坑 - Angular 使用入门

    一.Overview angular 入坑记录的笔记第一篇,完成开发环境的搭建,以及如何通过 angular cli 来创建第一个 angular 应用.入坑一个多星期,通过学习官方文档以及手摸手的按 ...

  7. [从 0 开始的 Angular 生活]No.38 实现一个 Angular Router 切换组件页面(一)

    前言 今天是进入公司的第三天,为了能尽快投入项目与成为团队可用的战力,我正在努力啃官方文档学习 Angular 的知识,所以这一篇文章主要是记录我如何阅读官方文档后,实现这个非常基本的.带导航的网页应 ...

  8. [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 ...

  9. [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 ...

随机推荐

  1. Oracle_Flashback_技术_总结

    Oracle Flashback 技术 总结 Flashback 技术是以Undo segment中的内容为基础的, 因此受限于UNDO_RETENTON参数.要使用flashback 的特性,必须启 ...

  2. Java基础--多线程的方方面面

    1,什么是线程?线程和进程的区别是什么? 2,什么是多线程?为什么设计多线程? 3,Java种多线程的实现方式是什么?有什么区别? 4,线程的状态控制有哪些方法? 5,线程安全.死锁和生产者--消费者 ...

  3. 再谈CMake与RPATH

    之前写过一篇<探讨CMake中关于RPATH的使用>,只要针对的方面是在编译生成之后(不包括安装的make install)如何去除RPATH的问题.今天给大家主要介绍一下如何让CMake ...

  4. TCP/IP-入门

    Life is not a rehearsal "人生没有彩排" 参考资料:TCP/IP入门经典 (第五版) TCP/IP详解 卷一:协议 一.什么是TCP/IP TCP/IP是一 ...

  5. jQuery 图片轮播

    HTML <div class="carousel">    <ul class="car-img">        <li> ...

  6. strtolower() strtoupper()等字符串大小写转换函数

    $str = "Mary Had A Little Lamb and She LOVED It So"; string strtolower ( string $str )— 将字 ...

  7. python使用platform模块获取系统环境并去除换行符

    近来在porting一个网站,企图拿到这个网站的数据来做分析.为了支持多系统环境的正常运行.需要知道当前系统环境的是什么OS? 1.python内置platform库.可以很方便得到当前系统环境时什么 ...

  8. JS键盘的键码(event.keyCode)

    keycode 8 = BackSpace BackSpace keycode 9 = Tab Tab keycode 12 = Clear keycode 13 = Enter keycode 16 ...

  9. Ajax表单提交插件jquery form

    jQuery Form插件是一个优秀的Ajax表单插件,我们可以非常容易的使用它处理表单控件的值,清空和复位表单控件,附件上传,以及完成Ajax表单提交. jQuery Form有两个核心方法ajax ...

  10. 改进基于Boost.Asio的聊天服务

    Boost.Asio是个非常易用的C++异步网络库,官方文档中一个示例是聊天服务,分为chat_message.chat_client.chat_server三个部分.chat_server的启动代码 ...