Let's start first with ngModel directive. As we know this ngModel directive is used in the Angular Template driven form which is responsible for keeping track of the value of the input and it makes value available to the ngForm Directive. In other sense, we can say ngModel directive binds each input element to a property in the form model. It enables two-way data binding, automatically syncing the input values with the form model. Generally speaking we use ngForm, ngModel, and ngSubmit to handle form state, validation, and submission.

Please visit for information related to ngForm directive

https://gist.github.com/codewithbot/a9548365ef3a4ace32f59db4dcfbde8e

One more thing to remember 

• Two-Way Data Binding: Automatically syncs form data between the template and the component.

We can say having  built-in support for form validation using Angular's validation directives,  Template-driven forms are ideal for simple forms and provide a straightforward way to manage form data and validation directly in the template. They leverage Angular's powerful directives and two-way data binding to create a seamless form experience.

Let's talk about ngModelChange 

The ngModelChange event in Angular is an output property that emits an event whenever the value of the associated ngModel directive changes. It allows you to execute custom logic in your component when the user modifies the input field.

• Output Property: ngModelChange is an output property, meaning it emits an event from the input element to the component.
• Change Detection: It triggers whenever the value of the input field changes due to user interaction.
• Custom Logic Execution: You can bind a method in your component to the ngModelChange event to execute custom logic when the value changes. This can include things like:
  • Validating the input value
  • Formatting the input value
  • Performing calculations based on the input value
  • Updating other parts of the UI

ngModelChange provides a way to react to changes in the value of an input field in your Angular template. It allows you to execute custom logic in your component when the user modifies the input, giving you fine-grained control over the behavior of your form. We can say that we are subscribing to any changes into the value here of the email field. 

Here in the above screenshot, we can see that if user is typing in the input field, ngModel directive will track the value and validity of the input field and will also notify the ngForm directive whenever a new value is available. Since we are using ngModelOption which is emitting the new form value and we are trying to pass that value to our typescript class, we can observe that there will be a lot of events going on, one for each key pressed and sometimes it may be counter-productive.

Image a scenario where we want to track the email input field or any certain fields when we tab away and blur the field that means the user has already done with typing email and we want to call a backend api where we will validate if the user email already exists in the database table. So we will pefer to wait untill this field is filled in and when user tabs away to another one then ngModel will emit a new event

You might sense that I want to control exactly when the ngModel directive is going to emit a new value for this email field and we can do this using ngModelOption.

The ngModelOptions directive in Angular allows you to configure how ngModel updates the form control's value and how changes propagate. It provides options to control the timing of updates and the event that triggers them.

 Features of ngModelOptions

1. standalone:

   • If set to true, the ngModel will not register itself with its parent form. This is useful when you want to use ngModel for display purposes only and not include it in the form's data.

2. updateOn:

   • Specifies when the form control should update its value. It can be set to 'change', 'blur', or 'submit'.
   • 'change' (default): Updates the value on every change event.
   • 'blur' : Updates the value when the input loses focus.
   • 'submit' : Updates the value only when the form is submitted.

      <input name="email" class="form-control" type="email" id="email" required ngModel #email="ngModel"
        autocomplete="new_email" email="true" minlength="3" maxlength="20"
        pattern="[a-zA-Z0-9._\-]+@[a-zA-Z0-9.\-]+\.[a-zA-Z]{2,}"
       (ngModelChange)="onEmailChange($event)"
        [ngModelOptions]="{
         updateOn: 'blur',
         standalone: true
        }">
   
    <button class="btn btn-primary mt20" type="submit" [disabled]="loginForm.invalid">Log In</button>

1. updateOn: 'blur':
• In this example, the updateOn property is set to 'blur'.
• This means that the email form control will only update its value when the input loses focus.
• This can be useful to reduce the number of validation checks and improve performance.
2. ngModelOptions Directive: Allows you to configure how ngModel updates the form control's value and how changes propagate.
3. standalone Property: Specifies whether the ngModel should register itself with its parent form.
4. updateOn Property: Specifies when the form control should update its value ('change', 'blur', or 'submit').
5. we can use this to optimize the performance while using Angular Forms.
6. Note: if the updateOn Property is set to 'submit' and we are binding [disabled] property with loginform.invalid status. Ofcourse, it wont work as the ngModel will only inform the email input field value and validity status to ngForm once the form is submitted. So to test this you will have to remove this [disabled] binding.

standalone Property

​You want to have a field which is disconnected from its parent form (NG Form directive). It can be a search field which you just want to use it for searching in the form field but don't want to use its data for submitting it. While operating the input field in standalone mode, the parent form will not be aware about the value and validity state of this input field that means totaly in isolated state. So when you will print the form value you will not find the value for this isolated form control.

Apart from using these above option, we can also control what exact name of input field can be to which we are applying the ngModel. Let's say we dont want to use name property ie. name="email" either because we can not use it or the name is dynamically set in the dynamic form or might be we are using custom form control or this field accidentally have a property called name and we dont want to use it, in these kind of scenarios we can remove this name property from the input html and configure our own name property of our own choice. 

So let's specifiy the name what we want to use to register this email form control.

  <input ​type="email" ​id="email"​ngModel ​#email="ngModel"​(ngModelChange)="onEmailChange($event)"
​  [ngModelOptions]="{
           name: 'email'
          }">

so this name: 'email' property is going to be the property under which the NG Form directive at the level of form receives the value of this field.

​​​​

​​​​