NgControlName

export directive NgControlName

exported from angular2/common defined in angular2/src/common/forms/directives/ng_control_name.ts (line 34)

Creates and binds a control with a specified name to a DOM element.

This directive can only be used as a child of NgForm or NgFormModel.

Example

In this example, we create the login and password controls. We can work with each control separately: check its validity, get its value, listen to its changes.

@Component({ selector: "login-comp", directives: [FORM_DIRECTIVES], template: ` <form #f="ngForm" (submit)='onLogIn(f.value)'> Login <input type='text' ngControl='login' #l="form"> <div *ngIf="!l.valid">Login is invalid</div> Password <input type='password' ngControl='password'> <button type='submit'>Log in!</button> </form> `}) class LoginComp { onLogIn(value): void { // value === {login: 'some login', password: 'some password'} } }

We can also use ngModel to bind a domain model to the form.

@Component({ selector: "login-comp", directives: [FORM_DIRECTIVES], template: ` <form (submit)='onLogIn()'> Login <input type='text' ngControl='login' [(ngModel)]="credentials.login"> Password <input type='password' ngControl='password' [(ngModel)]="credentials.password"> <button type='submit'>Log in!</button> </form> `}) class LoginComp { credentials: {login:string, password:string}; onLogIn(): void { // this.credentials.login === "some login" // this.credentials.password === "some password" } }

Selectors

[ngControl]

Inputs

ng-control bound to .name

ng-model bound to NgControlName.model

Outputs

ng-model-change bound to NgControlName.update

Exported As

ngForm

Constructor

constructor(_parent: ControlContainer, _validators:
                /* Array<Validator|Function> */ any[], _asyncValidators:
                /* Array<Validator|Function> */ any[], valueAccessors: ControlValueAccessor[])

Not Yet Documented

Members

model : any

Not Yet Documented

viewModel : any

Not Yet Documented

ngOnChanges(changes: {[key: string]: SimpleChange})

Not Yet Documented

ngOnDestroy() : void

Not Yet Documented

viewToModelUpdate(newValue: any) : void

Not Yet Documented

path : string[]

Not Yet Documented

formDirective : any

Not Yet Documented

validator : Function

Not Yet Documented

asyncValidator : Function

Not Yet Documented

control : Control

Not Yet Documented