NgForm

export directive NgForm

exported from angular2/common defined in angular2/src/common/forms/directives/ng_form.ts (line 19)

If NgForm is bound in a component, <form> elements in that component will be upgraded to use the Angular form system.

Typical Use

Include FORM_DIRECTIVES in the directives section of a View annotation to use NgForm and its associated controls.

Structure

An Angular form is a collection of Controls in some hierarchy. Controls can be at the top level or can be organized in ControlGroups or ControlArrays. This hierarchy is reflected in the form's value, a JSON object that mirrors the form structure.

Submission

The ngSubmit event signals when the user triggers a form submission.

Example (live demo)

@Component({ selector: 'my-app', template: ` <div> <p>Submit the form to see the data object Angular builds</p> <h2>NgForm demo</h2> <form #f="ngForm" (ngSubmit)="onSubmit(f.value)"> <h3>Control group: credentials</h3> <div ngControlGroup="credentials"> <p>Login: <input type="text" ngControl="login"></p> <p>Password: <input type="password" ngControl="password"></p> </div> <h3>Control group: person</h3> <div ngControlGroup="person"> <p>First name: <input type="text" ngControl="firstName"></p> <p>Last name: <input type="text" ngControl="lastName"></p> </div> <button type="submit">Submit Form</button> <p>Form data submitted:</p> </form> <pre>{{data}}</pre> </div> `, directives: [CORE_DIRECTIVES, FORM_DIRECTIVES] }) export class App { constructor() {} data: string; onSubmit(data) { this.data = JSON.stringify(data, null, 2); } }

Selectors

form:not([ngNoForm]):not([ngFormModel])

ngForm

[ngForm]

Outputs

ng-submit bound to NgForm.ngSubmit

Exported As

ngForm

Constructor

constructor(validators: any[], asyncValidators: any[])

Not Yet Documented

Members

form : ControlGroup

Not Yet Documented

ngSubmit : EventEmitter

Not Yet Documented

formDirective : Form

Not Yet Documented

control : ControlGroup

Not Yet Documented

path : string[]

Not Yet Documented

controls : {[key: string]: AbstractControl}

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) : void

Not Yet Documented

removeControlGroup(dir: NgControlGroup) : void

Not Yet Documented

getControlGroup(dir: NgControlGroup) : ControlGroup

Not Yet Documented

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

Not Yet Documented

onSubmit() : boolean

Not Yet Documented