New in Angular 1.3: ng-model-options getters and setters
With ngModelOptions in Angular 1.3 you can turn your model into a getter/setter function to have greater control over your model.
[00:01] This is another video about NG model options, and some of the cool things that you can do with this new directive in Angular 1.3. Here we're using the directive, NG model options on this input of type email, and so we'll go ahead and hide this HTML, and that is bound to this model options object. Two of the properties on this object that we're going to be talking about are getter-setter and allow invalid.
[00:26] First let's look at getter-setter. We'll just assign that to true. What this is telling Angular is that the model that you're binding this input to is a getter and setter, and so we want you to treat it as a function. Actually, let's open up this HTML again. We are binding it to input value, vm.inputvalue, so let's create a function that's a getter-setter for that value.
[00:49] We'll say vm.inputvalue equals a function that takes a value, so they'll pass us a value. If the value that they pass to us is defined, then we'll assign it to some internal state that we're taking care of on our own, and then we'll return the state that we're taking care of on our own, regardless of whether that value is defined. Let's create that state here.
[01:10] Now it is an empty stream, and we'll say, Angular is defined val, and if that is true...Here, actually we're going to return this, so if that is true we'll say _val, our internal state, is equal to the val. If it's not defined, then we'll just simply return our internal state. This is the getter-setter, and so when we are using this, we need to invoke it as we are here, so vm.inputvalue invoked right there.
[01:44] Normally you would just have it bound directly to the value itself. You invoke that in your binding, and then in your NG model you don't invoke it, because you're telling Angular in your model options that it's a getter-setter, so it expects this to be an expression.
[02:02] Let's look at one pitfall that you might run into. Again, this is of type email. If we go ahead and try and start typing, I promise you that I'm typing but nothing's showing up. This is likely something that you'll run into, and you want to be careful of. When we received this value, because this is an email input, until it's a valid email it's considered to be undefined. When it comes into here, it's always going to fail this test, and it will just simply return _val, which will always be an empty string, because it'll never be assigned.
[02:42] What you need to do in this case is say, "allow invalid true." This will tell Angular, "Hey, regardless of whether it's valid or not, I want the model value to be the value that they input into the input field." You don't have to do this for just regular text input that won't have that kind of validity checking, but for stuff that will when you have a getter-setter, you need to be a little bit conscious of what's going on.
[03:12] Now we can say, "Hello@example.com," and everything's working just fine. The only thing you need to be aware of is normally, in a normal case, this bound value would be assigned until the email is valid. That's just something to be aware of as you're using this getter-setter option. But that's how you use it.
In order to use getterSetter I found myself using arguments.length to allow users to clear values. I've also got updateOn: 'blur' in my model options in my use case.