NgFormModel

export directive NgFormModel

exported from angular2/common defined in angular2/src/common/forms/directives/ng_form_model.ts (line 23)

Binds an existing control group to a DOM element.

Example (live demo)

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.

@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.

@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' } }

Selectors

[ngFormModel]

Inputs

ng-form-model bound to NgFormModel.form

Outputs

ng-submit bound to NgFormModel.ngSubmit

Exported As

ngForm

Constructor

constructor(_validators: any[], _asyncValidators: any[])

Not Yet Documented

Members

form : ControlGroup

Not Yet Documented

directives : NgControl[]

Not Yet Documented

ngSubmit : EventEmitter

Not Yet Documented

ngOnChanges(changes: {[key: string]: SimpleChange}) : void

Not Yet Documented

formDirective : Form

Not Yet Documented

control : ControlGroup

Not Yet Documented

path : string[]

Not Yet Documented

addControl(dir: NgControl) : void

Not Yet Documented

getControl(dir: NgControl) : Control

Not Yet Documented

removeControl(dir: NgControl) : void

Not Yet Documented

addControlGroup(dir: NgControlGroup)

Not Yet Documented

removeControlGroup(dir: NgControlGroup)

Not Yet Documented

getControlGroup(dir: NgControlGroup) : ControlGroup

Not Yet Documented

updateModel(dir: NgControl, value: any) : void

Not Yet Documented

onSubmit() : boolean

Not Yet Documented