NgControlName class

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: const [formDirectives],
     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 {
 void onLogIn(value) {
   // 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: [formDirectives],
     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 {
   // credentials.login === "some login"
   // credentials.password === "some password"
 }
}

Inheritance

Annotations

@Directive.new(selector: '[ngControl]', providers: [ExistingProvider(NgControl, NgControlName)], exportAs: 'ngForm')

Constructors

NgControlName(@SkipSelf.new() ControlContainer<AbstractControlGroup> _parent, @Optional.new() @Self.new() @Inject.new(NG_VALIDATORS) List? validators, @Optional.new() @Self.new() @Inject.new(ngValueAccessor) List<ControlValueAccessor>? valueAccessors)

Properties

control → Control?: no setteroverride
dirty → bool?: no setterinherited
disabled ↔ bool?: getter/setter pairinherited-getter
enabled → bool?: no setterinherited
errors → Map<String, dynamic>?: no setterinherited
formDirective → Form: no setter
hashCode → int: The hash code for this object.
no setterinherited
model ↔ dynamic: getter/setter pair
name ↔ String?: getter/setter pairinherited-getteroverride-setter
path → List<String?>: no setteroverride
pristine → bool?: no setterinherited
runtimeType → Type: A representation of the runtime type of the object.
no setterinherited
touched → bool?: no setterinherited
untouched → bool?: no setterinherited
update → Stream: Updates from the view itself.
no setteroverride
valid → bool?: no setterinherited
validator → ValidatorFn?: finalinherited
value → dynamic: no setterinherited
valueAccessor ↔ ControlValueAccessor?: getter/setter pairinherited
viewModel ↔ dynamic: getter/setter pair

Methods

ngAfterChanges() → void
ngOnDestroy() → void: Executed before the directive is removed from the DOM and destroyed.
noSuchMethod(Invocation invocation) → dynamic: Invoked when a nonexistent method or property is accessed.
inherited
reset({dynamic value}) → void: Resets the form control.
inherited
toggleDisabled(bool isDisabled) → void: inherited
toString() → String: A string representation of this object.
inherited
viewToModelUpdate(dynamic newValue) → void: override

Operators

operator ==(Object other) → bool: The equality operator.
inherited