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.


<input [(ngModel)]="">

This is equivalent to having separate bindings:


Try the live example.

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


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


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
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


ngAfterChanges() → void
ngOnInit() → void
Executed after the first change detection run for a directive. [...]
viewToModelUpdate(dynamic newValue) → void
deliverStateChanges() → void
Semantically identical to calling setState((){}).
@Deprecated('Do not override this method. It will be removed'), @protected, inherited
noSuchMethod(Invocation invocation) → dynamic
Invoked when a non-existent method or property is accessed.
reset({dynamic value}) → void
Resets the form control. [...]
setState(void scheduleChangeDetectionAfter()) → void
Invokes the provided function and schedules change detection to occur.
@protected, inherited
toggleDisabled(bool isDisabled) → void
toString() → String
Returns a string representation of this object.


operator ==(dynamic other) → bool
The equality operator.