Angular ng-module

In Angular, the ngModel stores a variable by the reference, not by value. Bindings to models are input objects (e.g., dates) or collections (e.g., arrays).

The created Phone object has several fields that are used for validation purposes. We are listing the important ones.

ng-touched
ng-untouched
ng-pending
ng-pristine
ng-valid
ng-invalid
ng-dirty

Binding ngModel with getter and setter

Whenever the function is called with its zero arguments, it represents the model. And when called with parameters, it sets the value. So the ngModel refers to the address; it does not save the changed value to the object. Rather, it saves it in an internal state (variable-name. value).

It would be useful to use the getter and setter for the model when there is an internal representation because the getter and setter functions are used more often in the code.

Syntax:

Example:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body ng-app="myApp">
  <div ng-controller="myController">
  <form>
  Name:<input type="text" name="Name"
             ng-model="user.name"
             ng-model-options="{ getterSetter: true }" />
  <pre>user.name = <span ng-bind="user.name()"></span></pre>
  Name1:<input type="text" name="Name1"
             ng-model="user.name1"
             ng-model-options="{ getterSetter: true }" />
  <pre>user.name = <span ng-bind="user.name1()"></span></pre>
  </form>
 </div>
<script>
angular.module('myApp', [])
  .controller('myController', ['$scope', function($scope) {
    name = 'Javatpoint';
    name1 = "";
    $scope.user = {
      name: function(Name) {
      return arguments.length ? (name = Name) : name;
      },
      name1: function(Name1) {
      return arguments.length ? (name1 = Name1) : name1;
      } 
    };
  }]);
</script>
</body>
</html>

We have initialized name by the string Javatpoint and name1 by an empty string.

Properties

Property	Description
override	It sets the new value for the view model and emits the ngModelChange event.
control: FormControl	*Read-Only*
@Input('disabled') isDisabled: boolean	It will tracks whether the control is disabled.
@Input('ngModel') model: any	It tracks the value bound to this directive.
@Input('ngModelOptions') options: { name?: string; standalone?: boolean; updateOn?: FormHooks; }	It tracks configuration options for this ngModel instance. Standalone: ngModel will not register itself with its parent form and will act as if it is not in the form. Defaults to false. If a parent form does not exist, this option does not affect it. UpdateOn: It defines the event update the value and validity. Defaults to 'change'. Possible value: 'replace' \| 'Blurred' \| 'presented'.
@output('ngModelChange') Update: EventEmitter	Event emitter to create ngModelChange event after view model updates.
path: String[]	*Read-only*
FormDirector: Any	*Read-only* A top-level directive exists for this control, otherwise null.

The FormControl tracks the control's value, user interaction, and validation state to keep the view in sync with the model. If it is used as a parent, the directive also registers itself.

If you have two-way binding with [()], syntax values in the UI are always synced back to the domain model of your class.

To inspect the associated FormControl, export the directive to a local template variable using NgModel as the key. The most commonly used assets for direct access control also exist. See the full list of available properties in AbstractControlDirective.

Using ngModel on a standalone control

The examples show a simple standalone control using ngModel:

content_copyimport {Component} from '@angular/core';
@Component({
  selector: 'example-app',
  template: `
    <input [(ngModel)]="name" #ctrl="ngModel" required>

    <p>Value: {{ name }}</p>
    <p>Valid: {{ ctrl.valid }}</p>

    <button (click)="setValue()">Set value</button>
  `,
})
export class SimpleNgModelComp {
  name: string = '';

  setValue() {
    this.name = 'Nancy';
  }
}

When using ngModel within a <form> tag, you also provide a name attribute to register the control with the parent form under that name.

Use variables where necessary on form submission. In the context of the parent form, it is often unnecessary to include one-way or two-way binding, as the parent form syncs the values for you. If you need to populate initial values in your form, using a one-way binding to ngModel is sufficient as long as you use the value of the exported form instead of the value of the domain model on submit.

Using ngModel within a form

content_copyimport {component} from '@angular/core';
import {ngForm} from '@angular/forms';

@Component({
  selector: 'example-app',
  template: `
    <form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
      <input name="first" ngModel required #first="ngModel">
      <input name="last" ngModel>
      <button>Submit</button>
    </form>

    <p>First name value: {{ first.value }}</p>
    <p>First name valid: {{ first.valid }}</p>
    <p>Form value: {{ f.value | json }}</p>
    <p>Form valid: {{ f.valid }}</p>
  `,
})
export class SimpleFormComp {
  onSubmit(f: NgForm) {
    console.log(f.value);  // { first: '', last: '' }
    console.log(f.valid);  // false
  }
}

Using a standalone ngModel within a group

The example shows us to use the standalone ngModel control within a form. It controls the display of the form, but does not contain form data.

content_copy<form>
   <input name="login" ngModel placeholder="login">
   <input type="checkbox" ngModel [ngModelOptions]="{standalone: true}">Show more options?
</form>
<!-- Form Value: {login: ''} ->

Setting NgModel name attribute by options

Here, the attribute identified as name is used in the custom form control component.

content_copy<form>
  <my-custom-form-control name="Nancy" ngModel [ngModelOptions]="{name: 'user'}">
  </my-custom-form-control>
</form>
<!-- form value: {user: ''} -->

NgModel

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

Description

The FormControl instance tracks the control's value, user interaction, and validation state and keeps the view in sync with the model. If used as a parent, the directive also registers itself as a child control.

The directive accepts a domain model as an optional input. If you have a one-way binding to a NgModel with the [] syntax, changing the value of the domain model in the component class sets the value in the view if you have two-way binding with [()] syntax values in the UI, then the synced back to the domain model of your class.

To inspect the associated FormControl, export the directive to a local template variable using NgModel as the key. You can then access the control using the Control property of the directive.

Using ngModel on a standalone control

The examples show a standalone control using NgModel:

content_copyimport {Component} from '@angular/core';

@Component({
  selector: 'example-app',
  template: `
    <input [(ngModel)]="name" #ctrl="ngModel" required>

    <p>Value: {{ name }}</p>
    <p>Valid: {{ ctrl.valid }}</p>

    <button (click)="setValue()">Set value</button>
  `,
})
export class SimpleNgModelComp {
  name: string = '';

  setValue() {
    this.name = 'Nancy';
  }
}

When we use NgModel within a <form> tag, you provide a name attribute to register control with the parent form under that name.

If you need to populate initial values in your form, using a one-way binding to NgModel is sufficient as long as you use the value of the exported form instead of the value of the domain model at the vertex.

Using a standalone ngModel within a group

The example shows you a standalone ngModel control within a form. It controls the display of the form, but cannot contain the form data.

content_copy<form>
  <input name="login" ngModel placeholder="Login">
  <input type="checkbox" ngModel [ngModelOptions]="{standalone: true}"> Show more options?
</form>
<!-- form value: {login: ''} -->

Setting the ngModel name attribute through options

The attribute identified as name is used in the custom form control component. To able to specify the name of the NgModel, you have to specify it by using the ngModelOptions input.

content_copy<form>
  <my-custom-form-control name="Javatpoint" ngModel [ngModelOptions]="{name: 'user'}">
  </my-custom-form-control>
</form>
<!-- form value: {user: ''} -->

Next TopicAngular File Upload

← prev next →