NgModel class

Creates a form NgControl instance from a domain model and binds it to a form control element. The form NgControl instance tracks the value, user interaction, and validation status of the control and keeps the view synced with the model.

This directive is intended to be used as a stand-alone value. If you would like to use it as part of a larger form, then it must be assigned a name using `ngControl="name". See NgControlName directive for more details.

All you need is the ngModel selector to activate it. For a two-way binding, use the [(ngModel)] syntax to ensure the model updates in both directions.

Learn more about ngModel in the Forms and Template Syntax pages.

Examples

<input [(ngModel)]="currentHero.name">

This is equivalent to having separate bindings:

<input
  [ngModel]="currentHero.name"
  (ngModelChange)="currentHero.name=$event">

Try the live example.

Inheritance
Annotations
  • @Directive(selector: '[ngModel]:not([ngControl]):not([ngFormControl])', providers: const [const ExistingProvider(NgControl, NgModel)], exportAs: 'ngForm', visibility: Visibility.all)

Constructors

NgModel(@Optional() @Self() @Inject(NG_VALIDATORS) List validators, @Optional() @Self() @Inject(ngValueAccessor) List<ControlValueAccessor> valueAccessors)

Properties

control Control
read-only, override
disabled ↔ bool
@Input('ngDisabled'), read / write, inherited-getter
model dynamic
@Input('ngModel'), write-only
path → List<String>
read-only, override
update → Stream
@Output('ngModelChange'), read-only
viewModel ↔ dynamic
read / write
dirty → bool
read-only, inherited
enabled → bool
read-only, inherited
errors → Map<String, dynamic>
read-only, inherited
hashCode → int
The hash code for this object. [...]
read-only, inherited
name ↔ String
read / write, inherited
pristine → bool
read-only, inherited
runtimeType → Type
A representation of the runtime type of the object.
read-only, inherited
stateChangeCallback ComponentStateCallback
Callback for state changes used by Angular AppView. [...]
write-only, inherited
touched → bool
read-only, inherited
untouched → bool
read-only, inherited
valid → bool
read-only, inherited
validator ValidatorFn
final, inherited
value → dynamic
read-only, inherited
valueAccessor ControlValueAccessor
read / write, inherited

Methods

ngAfterChanges() → void
ngOnInit() → void
Executed after the first change detection run for a directive. [...]
viewToModelUpdate(dynamic newValue) → void
override
deliverStateChanges() → void
Synchronously delivers changes to all subscribers. [...]
inherited
noSuchMethod(Invocation invocation) → dynamic
Invoked when a non-existent method or property is accessed. [...]
inherited
reset({dynamic value }) → void
Resets the form control. [...]
inherited
setState(void fn()) → void
Schedules a microtask to notify listeners of state change. [...]
inherited
toggleDisabled(bool isDisabled) → void
inherited
toString() → String
Returns a string representation of this object.
inherited

Operators

operator ==(dynamic other) → bool
The equality operator. [...]
inherited