Angular 12 References/ Forms
🍀 Angular References

[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. If a parent form exists, it 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 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. If no parent form exists, this option has no effect.

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.