NgControlGroup

export directive NgControlGroup

exported from angular2/common defined in angular2/src/common/forms/directives/ng_control_group.ts (line 22)

Creates and binds a control group to a DOM element.

This directive can only be used as a child of NgForm or NgFormModel.

Example (live demo)

@Component({ selector: 'my-app', directives: [FORM_DIRECTIVES], }) @View({ template: ` <div> <h2>Angular2 Control &amp; ControlGroup Example</h2> <form #f="ngForm"> <div ngControlGroup="name" #cg-name="form"> <h3>Enter your name:</h3> <p>First: <input ngControl="first" required></p> <p>Middle: <input ngControl="middle"></p> <p>Last: <input ngControl="last" required></p> </div> <h3>Name value:</h3> <pre>{{valueOf(cgName)}}</pre> <p>Name is {{cgName?.control?.valid ? "valid" : "invalid"}}</p> <h3>What's your favorite food?</h3> <p><input ngControl="food"></p> <h3>Form value</h3> <pre>{{valueOf(f)}}</pre> </form> </div> `, directives: [FORM_DIRECTIVES] }) export class App { valueOf(cg: NgControlGroup): string { if (cg.control == null) { return null; } return JSON.stringify(cg.control.value, null, 2); } }

This example declares a control group for a user's name. The value and validation state of this group can be accessed separately from the overall form.

Selectors

[ngControlGroup]

Inputs

ng-control-group bound to .name

Exported As

ngForm

Constructor

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

Not Yet Documented

Members

ngOnInit() : void

Not Yet Documented

ngOnDestroy() : void

Not Yet Documented

control : ControlGroup

Get the ControlGroup backing this binding.

path : string[]

Get the path to this control group.

formDirective : Form

Get the Form to which this group belongs.

validator : Function

Not Yet Documented

asyncValidator : Function

Not Yet Documented