• Overview
@angular/forms

NgModel

directive

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

  
    class NgModel extends NgControl implements OnChanges ,OnDestroy {}

control

viewModel

any

Internal reference to the view model value.

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.

isDisabled

boolean

Tracks whether the control is disabled.

model

any

Tracks the value bound to this directive.

options

{ name?: string | undefined; standalone?: boolean | undefined; updateOn?: FormHooks | undefined; }

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

update

Event emitter for producing the ngModelChange event after the view model updates.

ngOnChanges

void
@paramchangesSimpleChanges
@returnsvoid

ngOnDestroy

void
@returnsvoid

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.

formDirective

any

The top-level directive for this control if present, otherwise null.

viewToModelUpdate

void

Sets the new value for the view model and emits an ngModelChange event.

@paramnewValueany

The new value emitted by ngModelChange.

@returnsvoid

valueAccessor

The value accessor for the control

value

any

Reports the value of the control if it is present, otherwise null.

valid

boolean | null

Reports whether the control is valid. A control is considered valid if no validation errors exist with the current value. If the control is not present, null is returned.

invalid

boolean | null

Reports whether the control is invalid, meaning that an error exists in the input value. If the control is not present, null is returned.

pending

boolean | null

Reports whether a control is pending, meaning that async validation is occurring and errors are not yet available for the input value. If the control is not present, null is returned.

disabled

boolean | null

Reports whether the control is disabled, meaning that the control is disabled in the UI and is exempt from validation checks and excluded from aggregate values of ancestor controls. If the control is not present, null is returned.

enabled

boolean | null

Reports whether the control is enabled, meaning that the control is included in ancestor calculations of validity or value. If the control is not present, null is returned.

errors

Reports the control's validation errors. If the control is not present, null is returned.

pristine

boolean | null

Reports whether the control is pristine, meaning that the user has not yet changed the value in the UI. If the control is not present, null is returned.

dirty

boolean | null

Reports whether the control is dirty, meaning that the user has changed the value in the UI. If the control is not present, null is returned.

touched

boolean | null

Reports whether the control is touched, meaning that the user has triggered a blur event on it. If the control is not present, null is returned.

status

string | null

Reports the validation status of the control. Possible values include: 'VALID', 'INVALID', 'DISABLED', and 'PENDING'. If the control is not present, null is returned.

untouched

boolean | null

Reports whether the control is untouched, meaning that the user has not yet triggered a blur event on it. If the control is not present, null is returned.

statusChanges

Observable<any> | null

Returns a multicasting observable that emits a validation status whenever it is calculated for the control. If the control is not present, null is returned.

valueChanges

Observable<any> | null

Returns a multicasting observable of value changes for the control that emits every time the value of the control changes in the UI or programmatically. If the control is not present, null is returned.

validator

Synchronous validator function composed of all the synchronous validators registered with this directive.

asyncValidator

Asynchronous validator function composed of all the asynchronous validators registered with this directive.

reset

void

Resets the control with the provided value if the control is present.

@paramvalueany
@returnsvoid

hasError

boolean

Reports whether the control with the given path has the error specified.

@paramerrorCodestring

The code of the error to check

@parampathstring | (string | number)[] | undefined

A list of control names that designates how to move from the current control to the control that should be queried for errors.

@returnsboolean
Usage notes

For example, for the following FormGroup:

          
form = new FormGroup({  address: new FormGroup({ street: new FormControl() })});

The path to the 'street' control from the root form would be 'address' -> 'street'.

It can be provided to this method in one of two formats:

  1. An array of string control names, e.g. ['address', 'street']
  2. A period-delimited list of control names in one string, e.g. 'address.street'

If no path is given, this method checks for the error on the current control.

getError

any

Reports error data for the control with the given path.

@paramerrorCodestring

The code of the error to check

@parampathstring | (string | number)[] | undefined

A list of control names that designates how to move from the current control to the control that should be queried for errors.

@returnsany
Usage notes

For example, for the following FormGroup:

          
form = new FormGroup({  address: new FormGroup({ street: new FormControl() })});

The path to the 'street' control from the root form would be 'address' -> 'street'.

It can be provided to this method in one of two formats:

  1. An array of string control names, e.g. ['address', 'street']
  2. A period-delimited list of control names in one string, e.g. 'address.street'

ngAcceptInputType_isDisabled

string | boolean
Jump to details