273 lines
3.4 KiB
Plaintext
273 lines
3.4 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.32/modules/angular2/src/forms/directives/ng_form.ts#L19-L146">angular2/src/forms/directives/ng_form.ts (line 19)</a>
|
|
|
|
:markdown
|
|
Creates and binds a form object to a DOM element.
|
|
|
|
# Example
|
|
|
|
```
|
|
@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: 'form:not([ng-no-form]):not([ng-form-model]),ng-form,[ng-form]',
|
|
hostInjector: [formDirectiveBinding],
|
|
host: {
|
|
'(submit)': 'onSubmit()',
|
|
},
|
|
events: ['ngSubmit'],
|
|
exportAs: 'form'
|
|
})
|
|
|
|
|
|
.l-main-section
|
|
h2 Members
|
|
.l-sub-section
|
|
h3 constructor
|
|
|
|
|
|
pre.prettyprint
|
|
code.
|
|
constructor()
|
|
|
|
:markdown
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3 form
|
|
|
|
|
|
:markdown
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3 ngSubmit
|
|
|
|
|
|
:markdown
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3 formDirective
|
|
|
|
|
|
:markdown
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3 control
|
|
|
|
|
|
:markdown
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3 path
|
|
|
|
|
|
:markdown
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3 controls
|
|
|
|
|
|
:markdown
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3 addControl
|
|
|
|
|
|
pre.prettyprint
|
|
code.
|
|
addControl(dir: NgControl)
|
|
|
|
:markdown
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3 getControl
|
|
|
|
|
|
pre.prettyprint
|
|
code.
|
|
getControl(dir: NgControl)
|
|
|
|
:markdown
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3 removeControl
|
|
|
|
|
|
pre.prettyprint
|
|
code.
|
|
removeControl(dir: NgControl)
|
|
|
|
:markdown
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3 addControlGroup
|
|
|
|
|
|
pre.prettyprint
|
|
code.
|
|
addControlGroup(dir: NgControlGroup)
|
|
|
|
:markdown
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3 removeControlGroup
|
|
|
|
|
|
pre.prettyprint
|
|
code.
|
|
removeControlGroup(dir: NgControlGroup)
|
|
|
|
:markdown
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3 getControlGroup
|
|
|
|
|
|
pre.prettyprint
|
|
code.
|
|
getControlGroup(dir: NgControlGroup)
|
|
|
|
:markdown
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3 updateModel
|
|
|
|
|
|
pre.prettyprint
|
|
code.
|
|
updateModel(dir: NgControl, value: any)
|
|
|
|
:markdown
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3 onSubmit
|
|
|
|
|
|
pre.prettyprint
|
|
code.
|
|
onSubmit()
|
|
|
|
:markdown
|
|
|
|
|
|
|
|
|
|
|
|
|