• Angular2 Form


    1 basic usage

    1 import formDirectives 

    import {formDirectives} from 'angular2/forms';
    

    2 inject directive into View

    directives: [formDirectives]
    

    3 config your form template

        template: `<form #f="form" (submit)="onSubmit(f.value)">
                    <input type="text" ng-control="username" />
                    <input type="text" ng-control="password"/>
                    <button type="submit">submit</button>
                  </form>`,
    

        take care : 1 #f='form' 2 ng-control

          after you submit you will get the result like {username:xx,password:xx}

    4 all the code

    /**
     * Created by Administrator on 2015/7/24.
     */
    import {Component,View} from 'angular2/angular2';
    import {formDirectives} from 'angular2/forms';
    
    @Component({
        selector: 'form-test'
    })
    
    @View({
        template: `<form #f="form" (submit)="onSubmit(f.value)">
                    <input type="text" ng-control="username" />
                    <input type="text" ng-control="password"/>
                    <button type="submit">submit</button>
                  </form>`,
        directives: [formDirectives]
    })
    
    export class FormTest {
        constructor() {
        }
    
        onSubmit(formGroup) {
            console.log(formGroup);
        }
    }
    

      

    2 two-way binding

    use [(ng-model)]='xxxx'

    @View({
        template: `<form #f="form" (submit)="onSubmit(f.value)">
                    <input type="text" ng-control="username" [(ng-model)]="login.userName"/>
                    <input type="text" ng-control="password" [(ng-model)]="login.password"/>
                    <button type="submit">submit</button>
                  </form>`,
        directives: [formDirectives]
    })
    

      

    3 ng-control-group

    @View({
        template: `<form #f="form" (submit)="onSubmit(f.value)">
                    <div ng-control-group="basic">
                        <input type="text" ng-control="username" [(ng-model)]="login.basic.userName"/>
                        <input type="text" ng-control="password" [(ng-model)]="login.basic.password"/>
                    </div>
                    <div ng-control-group="company">
                        <input type="text" ng-control="companyname" [(ng-model)]="login.company.companyName"/>
                    </div>
                    <button type="submit">submit</button>
                   </form>`,
        directives: [formDirectives]
    })
    

      use ng-control-group, you will get the result like 

      

    this.login = {
                basic: {
                    userName: 'Jackey',
                    password: '123'
                },
                company: {
                    companyName: ''
                }
            }
    

      

  • 相关阅读:
    java接口变量问题
    FileInputStream与BufferedInputStream的对比
    eclipse使用javaFX写一个HelloWorkld
    Windows 安装Java与配置环境变量
    asp.net core处理中文的指南
    修改release management client对应的服务器的地址
    在server2012安装tfs遇到的问题:KB2919355
    release management客户端无法连接到release management server的问题解决
    如何升级PowerShell
    VS2010下调试.NET源码
  • 原文地址:https://www.cnblogs.com/lihaozhou/p/4665674.html
Copyright © 2020-2023  润新知