206 lines
2.4 KiB
Plaintext
206 lines
2.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_control.ts#L14-L104">angular2/src/forms/directives/ng_form_control.ts (line 14)</a>
|
||
|
|
||
|
:markdown
|
||
|
Binds an existing control to a DOM element.
|
||
|
|
||
|
# Example
|
||
|
|
||
|
In this example, we bind the control to an input element. When the value of the input element
|
||
|
changes, the value of
|
||
|
the control will reflect that change. Likewise, if the value of the control changes, the input
|
||
|
element reflects that
|
||
|
change.
|
||
|
|
||
|
```
|
||
|
@Component({selector: "login-comp"})
|
||
|
@View({
|
||
|
directives: [formDirectives],
|
||
|
template: "<input type='text' [ng-form-control]='loginControl'>"
|
||
|
})
|
||
|
class LoginComp {
|
||
|
loginControl:Control;
|
||
|
|
||
|
constructor() {
|
||
|
this.loginControl = new Control('');
|
||
|
}
|
||
|
}
|
||
|
|
||
|
```
|
||
|
|
||
|
We can also use ng-model to bind a domain model to the form.
|
||
|
|
||
|
```
|
||
|
@Component({selector: "login-comp"})
|
||
|
@View({
|
||
|
directives: [formDirectives],
|
||
|
template: "<input type='text' [ng-form-control]='loginControl' [(ng-model)]='login'>"
|
||
|
})
|
||
|
class LoginComp {
|
||
|
loginControl:Control;
|
||
|
login:string;
|
||
|
|
||
|
constructor() {
|
||
|
this.loginControl = new Control('');
|
||
|
}
|
||
|
}
|
||
|
```
|
||
|
|
||
|
|
||
|
.l-main-section
|
||
|
h2 Members
|
||
|
.l-sub-section
|
||
|
h3 constructor
|
||
|
|
||
|
|
||
|
pre.prettyprint
|
||
|
code.
|
||
|
constructor(ngValidators: QueryList<NgValidator>)
|
||
|
|
||
|
:markdown
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
.l-sub-section
|
||
|
h3 form
|
||
|
|
||
|
|
||
|
:markdown
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
.l-sub-section
|
||
|
h3 update
|
||
|
|
||
|
|
||
|
:markdown
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
.l-sub-section
|
||
|
h3 model
|
||
|
|
||
|
|
||
|
:markdown
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
.l-sub-section
|
||
|
h3 viewModel
|
||
|
|
||
|
|
||
|
:markdown
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
.l-sub-section
|
||
|
h3 ngValidators
|
||
|
|
||
|
|
||
|
:markdown
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
.l-sub-section
|
||
|
h3 onChange
|
||
|
|
||
|
|
||
|
pre.prettyprint
|
||
|
code.
|
||
|
onChange(c: StringMap<string, any>)
|
||
|
|
||
|
:markdown
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
.l-sub-section
|
||
|
h3 path
|
||
|
|
||
|
|
||
|
:markdown
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
.l-sub-section
|
||
|
h3 control
|
||
|
|
||
|
|
||
|
:markdown
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
.l-sub-section
|
||
|
h3 validator
|
||
|
|
||
|
|
||
|
:markdown
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
.l-sub-section
|
||
|
h3 viewToModelUpdate
|
||
|
|
||
|
|
||
|
pre.prettyprint
|
||
|
code.
|
||
|
viewToModelUpdate(newValue: any)
|
||
|
|
||
|
:markdown
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|