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. If used within a parent form, the directive will also register itself with the form as a child control.

This directive can be used by itself or as part of a larger form. 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.


<input [(ngModel)]="">

This is equivalent to having separate bindings:


Try the live example.

  • @Directive(selector: '[ngModel]:not([ngControl]):not([ngFormControl])', providers: const [formControlBinding], inputs: const ['model: ngModel'], exportAs: 'ngForm')


NgModel(@Optional() @Self() @Inject(NG_VALIDATORS) List _validators, @Optional() @Self() @Inject(NG_VALUE_ACCESSOR) List<ControlValueAccessor> valueAccessors)


control Control
model ↔ dynamic
read / write
path → List<String>
update → Stream
@Output('ngModelChange'), read-only
validator ValidatorFn
viewModel ↔ dynamic
read / write
dirty → 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
touched → bool
read-only, inherited
untouched → bool
read-only, inherited
valid → bool
read-only, inherited
value → dynamic
read-only, inherited
valueAccessor ControlValueAccessor
read / write, inherited


ngOnChanges(Map<String, SimpleChange> changes) → void
ngOnInit() → dynamic
Executed after the first change detection run for a directive. [...]
viewToModelUpdate(newValue) → void
noSuchMethod(Invocation invocation) → dynamic
Invoked when a non-existent method or property is accessed. [...]
toString() → String
Returns a string representation of this object.


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