Control NgModel Writes with ngModelOptions

Angular forms are my favourite aspect of the framework, they offer so much and different approaches.

When it comes to template-driven forms, there are some performance enhancements that we can make.

Behind the scenes every time a user enters data into your form, Angular is keeping track of not only things like the validity states, but the model and values themselves. This leads to some additional work for Angular to do as a user types away into your form fields.

Let’s begin with a simple form setup:

<form #form="ngForm">
  <label>
    <input
      type="text"
      name="name"
      ngModel>
  </label>
  <pre></pre>
</form>

By default, Angular uses the 'input' event listener, so any time the input’s value changes, so does Angular’s to keep things in sync. Try it out and start typing:

So, how could we improve the performance? There will be many cases that we don’t care about the value of an input until the user has finished typing and blurs (leaves) the field.

In small applications, this is perfectly acceptable, but nonetheless we can benefit from using this technique I’ll show you.

We could also assume that as your form grows, so does its complexity. You may have subscriptions to things such as the valueChanges Observable, which we wouldn’t necessarily care about getting updates on every single change.

This leads us to consider a better option through a built-in Directive called ngModelOptions. The names suggests that we can provide options to ngModel, and we can do exactly that and specify the events we only want to update our models on via the updateOn property:

<form #form="ngForm">
  <label>
    <input
      type="text"
      name="name"
      [ngModelOptions]="{ updateOn: 'blur' }"
      ngModel>
  </label>
  <pre></pre>
</form>

Just bind to the ngModelOptions property and pass in our options object.

Give it a try, start typing and you’ll see the model is not instantly reflected in the template - then blur the input and it is written to the ngModel:

Of course, we could also use other events, such as 'input' or 'paste' and any others you wish to use.

🚀 There’s so much more to Angular that I can teach you. Fast track your skills overnight with my deep-dive Angular Courses and take your skills to the top.

I hope you enjoyed this lesson on Angular’s template forms and using the ngModelOptions to control the writes from the input to the Angular internal models. It can help cut down on change detection cycles and much more if you’re dealing with observables and subscribing to some of the built-in form APIs.