Angular 10 References/ Forms

[ngModel] directive

Creates a FormControl instance from a domain model and binds it to a form control element.

The FormControl 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 also registers itself with the form as a child control.

This directive is used by itself or as part of a larger form. Use the ngModel selector to activate it.

It accepts a domain model as an optional Input. If you have a one-way binding to ngModel with [] syntax, changing the value of the domain model in the component class sets the value in the view. If you have a two-way binding with [()] syntax (also known as 'banana-box syntax'), the value in the UI always syncs back to the domain model in your class.

To inspect the properties of the associated FormControl (like validity state), export the directive into a local template variable using ngModel as the key (ex: #myVar="ngModel"). You then access the control using the directive's control property, but most properties used (like valid and dirty) fall through to the control anyway for direct access. See a full list of properties directly available in AbstractControlDirective.

<input [(ngModel)]="name">
{{ name }}

Interface, extends NgControl


control: FormControl


static ngAcceptInputType_isDisabled: boolean|string


viewModel: any
Internal reference to the view model value.


@Input() name: string
Tracks the name bound to the directive. The parent form uses this name as a key to retrieve this control's value.


@Input('disabled') isDisabled: boolean
Tracks whether the control is disabled.


@Input('ngModel') model: any
Tracks the value bound to this directive.


@Input('ngModelOptions') options: {name?: string, standalone?: boolean, updateOn?: FormHooks}
Tracks the configuration options for this `ngModel` instance. **name**: An alternative to setting the name attribute on the form control element. See the [example](api/forms/NgModel#using-ngmodel-on-a-standalone-control) for using `NgModel` as a standalone control. **standalone**: When set to true, the `ngModel` will not register itself with its parent form, and acts as if it's not in the form. Defaults to false. **updateOn**: Defines the event upon which the form control value and validity update. Defaults to 'change'. Possible values: `'change'` | `'blur'` | `'submit'`.


@Output('ngModelChange') update
Event emitter for producing the `ngModelChange` event after the view model updates.


get path(): string[]
Returns an array that represents the path from the top-level form to this control. Each index is the string name of the control on that level.


get formDirective(): any
The top-level directive for this control if present, otherwise null.


get validator(): ValidatorFn|null
Synchronous validator function composed of all the synchronous validators registered with this directive.


get asyncValidator(): AsyncValidatorFn|null
Async validator function composed of all the async validators registered with this directive.


viewToModelUpdate(newValue: any): void
Sets the new value for the view model and emits an `ngModelChange` event.