angular-docs-cn/public/docs/js/latest/api/forms/ControlGroupDirective-class.jade
2015-06-01 23:18:32 -07:00

121 lines
2.0 KiB
Plaintext

p.location-badge.
exported from <a href='../forms'>angular2/forms</a>
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/forms/directives/control_group_directive.ts#L10-L73">angular2/src/forms/directives/control_group_directive.ts (line 10)</a>
:markdown
Binds a control group to a DOM element.
# Example
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.
Here we use <a href='formDirectives-const.html'><code>formDirectives</code></a>, rather than importing each form directive individually, e.g.
`ControlDirective`, `ControlGroupDirective`. This is just a shorthand for the same end result.
```
@Component({selector: "login-comp"})
@View({
directives: [formDirectives],
template: "<form [control-group]='loginForm'>" +
"Login <input type='text' control='login'>" +
"Password <input type='password' control='password'>" +
"<button (click)="onLogin()">Login</button>" +
"</form>"
})
class LoginComp {
loginForm:ControlGroup;
constructor() {
this.loginForm = new ControlGroup({
login: new Control(""),
password: new Control("")
});
}
onLogin() {
// this.loginForm.value
}
}
```
.l-main-section
h2 Members
.l-sub-section
h3 constructor
pre.prettyprint
code.
constructor(@Ancestor() _parent: ControlContainerDirective)
:markdown
.l-sub-section
h3 formDirective
:markdown
.l-sub-section
h3 onDestroy
pre.prettyprint
code.
onDestroy()
:markdown
.l-sub-section
h3 onInit
pre.prettyprint
code.
onInit()
:markdown
.l-sub-section
h3 path
:markdown