zoukankan      html  css  js  c++  java
  • [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}}
        `
    })
  • 相关阅读:
    Python中最常见的10个列表操作
    使用Mac的texturetool将图片转换为PVRTC格式
    Android、iOS复制到粘贴板
    Python
    Pytest 作业
    Jmeter系列(34)- 详解 Jmeter CLI 模式
    Jmeter系列(33)- Jmeter 分布式测试
    Jmeter系列(32)- 详解性能监控工具 nmon
    Jmeter系列(31)- 详解 ForEach控制器
    Jmeter系列(30)- 详解 Loop Controller 循环控制器
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4987300.html
Copyright © 2011-2022 走看看