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}}
        `
    })
  • 相关阅读:
    学习笔记4
    学习笔记3
    学习笔记2
    学习笔记1
    MySQL 随笔总结
    java1-4
    java1-3
    java1-2
    java 1-1
    Mysql 基础
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4987300.html
Copyright © 2011-2022 走看看