View source Improve this doc

# `NgModelController`
type in module `ng`

## Description

`NgModelController` provides API for the `ng-model` directive. The controller contains services for data-binding, validation, CSS update, value formatting and parsing. It specifically does not contain any logic which deals with DOM rendering or listening to DOM events. The `NgModelController` is meant to be extended by other directives where, the directive provides DOM manipulation and the `NgModelController` provides the data-binding. Note that you cannot use `NgModelController` in a directive with an isolated scope, as, in that case, the `ng-model` value gets put into the isolated scope and does not get propogated to the parent scope.

This example shows how to use `NgModelController` with a custom control to achieve data-binding. Notice how different directives (`contenteditable`, `ng-model`, and `required`) collaborate together to achieve the desired result.

#### Source

## Demo

## Methods

- ### $render()

  Called when the view needs to be updated. It is expected that the user of the ng-model directive will implement this method.

- ### $setPristine()

  Sets the control to its pristine state.

  This method can be called to remove the 'ng-dirty' class and set the control to its pristine state (ng-pristine class).

- ### $setValidity(validationErrorKey, isValid)

  Change the validity state, and notifies the form when the control changes validity. (i.e. it does not notify form if given validator is already marked as invalid).

  This method should be called by validators - i.e. the parser or formatter functions.

  ##### Parameters

  Param | Type | Details
  --- | --- | ---

  validationErrorKey

  string

  Name of the validator. the `validationErrorKey` will assign to `$error[validationErrorKey]=isValid` so that it is available for data-binding. The `validationErrorKey` should be in camelCase and will get converted into dash-case for class name. Example: `myError` will result in `ng-valid-my-error` and `ng-invalid-my-error` class and can be bound to as `{{someForm.someControl.$error.myError}}` .

  isValid | boolean | Whether the current state is valid (true) or invalid (false).

- ### $setViewValue(value)

  Read a value from view.

  This method should be called from within a DOM event handler. For example `input` or `select` directives call it.

  It internally calls all `$parsers` (including validators) and updates the `$modelValue` and the actual model path. Lastly it calls all registered change listeners.

  ##### Parameters

  Param | Type | Details
  --- | --- | ---
  value | string | Value from the view.

## Properties

- ### $viewValue

  Actual string value in the view.

- ### $modelValue

  The value in the model, that the control is bound to.

- ### $parsers

  Array of functions to execute, as a pipeline, whenever the control reads value from the DOM. Each function is called, in turn, passing the value through to the next. Used to sanitize / convert the value as well as validation. For validation, the parsers should update the validity state using `$setValidity()`, and return `undefined` for invalid values.

- ### $formatters

  Array of functions to execute, as a pipeline, whenever the model value changes. Each function is called, in turn, passing the value through to the next. Used to format / convert values for display in the control and validation.

      function formatter(value) {
      if (value) {
        return value.toUpperCase();
      }
      }
      ngModel.$formatters.push(formatter);

- ### $error

  An object hash with all errors as keys.

- ### $pristine

  True if user has not interacted with the control yet.

- ### $dirty

  True if user has already interacted with the control.

- ### $valid

  True if there is no error.

- ### $invalid

  True if at least one error on the control.