UNPKG

angular2

Version:

Angular 2 - a web framework for modern web apps

103 lines (102 loc) 3.28 kB
import { EventEmitter } from 'angular2/src/facade/async'; import { SimpleChange, OnChanges } from 'angular2/core'; import { NgControl } from './ng_control'; import { NgControlGroup } from './ng_control_group'; import { ControlContainer } from './control_container'; import { Form } from './form_interface'; import { Control, ControlGroup } from '../model'; /** * Binds an existing control group to a DOM element. * * ### Example ([live demo](http://plnkr.co/edit/jqrVirudY8anJxTMUjTP?p=preview)) * * In this example, we bind the control group to the form element, and we bind the login and * password controls to the login and password elements. * * ```typescript * @Component({ * selector: 'my-app', * template: ` * <div> * <h2>NgFormModel Example</h2> * <form [ngFormModel]="loginForm"> * <p>Login: <input type="text" ngControl="login"></p> * <p>Password: <input type="password" ngControl="password"></p> * </form> * <p>Value:</p> * <pre>{{value}}</pre> * </div> * `, * directives: [FORM_DIRECTIVES] * }) * export class App { * loginForm: ControlGroup; * * constructor() { * this.loginForm = new ControlGroup({ * login: new Control(""), * password: new Control("") * }); * } * * get value(): string { * return JSON.stringify(this.loginForm.value, null, 2); * } * } * ``` * * We can also use ngModel to bind a domain model to the form. * * ```typescript * @Component({ * selector: "login-comp", * directives: [FORM_DIRECTIVES], * template: ` * <form [ngFormModel]='loginForm'> * Login <input type='text' ngControl='login' [(ngModel)]='credentials.login'> * Password <input type='password' ngControl='password' * [(ngModel)]='credentials.password'> * <button (click)="onLogin()">Login</button> * </form>` * }) * class LoginComp { * credentials: {login: string, password: string}; * loginForm: ControlGroup; * * constructor() { * this.loginForm = new ControlGroup({ * login: new Control(""), * password: new Control("") * }); * } * * onLogin(): void { * // this.credentials.login === 'some login' * // this.credentials.password === 'some password' * } * } * ``` */ export declare class NgFormModel extends ControlContainer implements Form, OnChanges { private _validators; private _asyncValidators; form: ControlGroup; directives: NgControl[]; ngSubmit: EventEmitter<{}>; constructor(_validators: any[], _asyncValidators: any[]); ngOnChanges(changes: { [key: string]: SimpleChange; }): void; formDirective: Form; control: ControlGroup; path: string[]; addControl(dir: NgControl): void; getControl(dir: NgControl): Control; removeControl(dir: NgControl): void; addControlGroup(dir: NgControlGroup): void; removeControlGroup(dir: NgControlGroup): void; getControlGroup(dir: NgControlGroup): ControlGroup; updateModel(dir: NgControl, value: any): void; onSubmit(): boolean; private _checkFormPresent(); }