104 lines
1.9 KiB
Plaintext
104 lines
1.9 KiB
Plaintext
|
|
p.
|
|
<span class="location-badge">exported from <a href="/angular2/forms">angular2/forms</a></span>
|
|
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/forms/directives.js#L210">angular2/src/forms/directives.js (line 210)</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="angular2/forms/FormDirectives-var"><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],
|
|
inline: "<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(groupDirective:ControlGroupDirective)
|
|
|
|
:markdown
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3 addDirective
|
|
|
|
|
|
pre.prettyprint
|
|
code.
|
|
addDirective(c:ControlDirective)
|
|
|
|
:markdown
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3 controlGroup
|
|
|
|
|
|
pre.prettyprint
|
|
code.
|
|
controlGroup(controlGroup)
|
|
|
|
:markdown
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3 findControl
|
|
|
|
|
|
pre.prettyprint
|
|
code.
|
|
findControl(name:string)
|
|
|
|
:markdown
|
|
|
|
|
|
|
|
|
|
|