144 lines
2.6 KiB
Plaintext
144 lines
2.6 KiB
Plaintext
|
|
p.location-badge.
|
|
exported from <a href='../forms'>angular2/forms</a>
|
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/forms/directives/ng_control_group.ts#L12-L74">angular2/src/forms/directives/ng_control_group.ts (line 12)</a>
|
|
|
|
:markdown
|
|
Creates and binds a control group to a DOM element.
|
|
|
|
This directive can only be used as a child of <a href='NgForm-class.html'><code>NgForm</code></a> or <a href='NgFormModel-class.html'><code>NgFormModel</code></a>.
|
|
|
|
# Example
|
|
|
|
In this example, we create the credentials and personal control groups.
|
|
We can work with each group separately: check its validity, get its value, listen to its changes.
|
|
|
|
```
|
|
@Component({selector: "signup-comp"})
|
|
@View({
|
|
directives: [formDirectives],
|
|
template: `
|
|
<form #f="form" (submit)='onSignUp(f.value)'>
|
|
<div ng-control-group='credentials' #credentials="form">
|
|
Login <input type='text' ng-control='login'>
|
|
Password <input type='password' ng-control='password'>
|
|
</div>
|
|
<div *ng-if="!credentials.valid">Credentials are invalid</div>
|
|
|
|
<div ng-control-group='personal'>
|
|
Name <input type='text' ng-control='name'>
|
|
</div>
|
|
<button type='submit'>Sign Up!</button>
|
|
</form>
|
|
`})
|
|
class SignupComp {
|
|
onSignUp(value) {
|
|
// value === {personal: {name: 'some name'},
|
|
// credentials: {login: 'some login', password: 'some password'}}
|
|
}
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
.l-main-section
|
|
h2 Annotations
|
|
.l-sub-section
|
|
h3.annotation Directive
|
|
pre.prettyprint
|
|
code.
|
|
@Directive({
|
|
selector: '[ng-control-group]',
|
|
bindings: [controlGroupBinding],
|
|
properties: ['name: ng-control-group'],
|
|
lifecycle: [LifecycleEvent.onInit, LifecycleEvent.onDestroy],
|
|
exportAs: 'form'
|
|
})
|
|
|
|
|
|
.l-main-section
|
|
h2 Members
|
|
.l-sub-section
|
|
h3 constructor
|
|
|
|
|
|
pre.prettyprint
|
|
code.
|
|
constructor(_parent: ControlContainer)
|
|
|
|
:markdown
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3 onInit
|
|
|
|
|
|
pre.prettyprint
|
|
code.
|
|
onInit()
|
|
|
|
:markdown
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3 onDestroy
|
|
|
|
|
|
pre.prettyprint
|
|
code.
|
|
onDestroy()
|
|
|
|
:markdown
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3 control
|
|
|
|
|
|
:markdown
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3 path
|
|
|
|
|
|
:markdown
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3 formDirective
|
|
|
|
|
|
:markdown
|
|
|
|
|
|
|
|
|
|
|
|
|