AngularJS 1.0.0rc4 - Execute ng-change onblur

[mario...@googlemail.com]

Hi everybody,

as a user I need to insert s.th. like 1,95 into an input-field and the the validation function should be executed after I leave the field. 

Is there a way to call the scope function "onValidateBasePrice()" after i loose focus (onblur-event)?

<input class="iceInpTxt smallStyle" id="salesPrice" name="salesPrice" type="text"

                           ng-model="orderSheet.salesPrice" ng-change="onValidateBasePrice()">

Regards,

Mario

[Pawel Kozlowski]

Hi Mario!

Not sure what are you are trying to achieve here but I would assume
that you want to do some custom validation of the value entered in the
input field. If so I can see at least 2 ways of approaching this:

1) Using directives; see the "Custom validation" section in
http://docs-next.angularjs.org/guide/dev_guide.forms; My understanding
is that this is "the angular way".
2) Let the binding to the model occur, $watch this model value and do
custom logic in there;

Please also not that you've got an input type "number"
(http://docs-next.angularjs.org/api/angular.module.ng.$compileProvider.directive.input.number)
where you've got several built-in validation options (required, min,
max). I've noticed that you are using type="text" in your example so
not benefiting from the angular validation.

Anyway, would be great if you could elaborate on your scenario,
preferably using jsFiddle. You can us this one
http://jsfiddle.net/IgorMinar/CHVbb/364/ as a starting point.

Hope this helps,
Pawel

> --
> You received this message because you are subscribed to the Google Groups
> "AngularJS" group.
> To view this discussion on the web visit
> https://groups.google.com/d/msg/angular/-/zxgZ2iE92sIJ.
> To post to this group, send email to ang...@googlegroups.com.
> To unsubscribe from this group, send email to
> angular+u...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/angular?hl=en.

[Freewind]

I've the same question, and I made a simple demo: http://jsfiddle.net/Freewind/zGm4p/

What I want is to validate the email only if I lost focus on the input, e.g. press tab key, or click on the blank page. 

But when I use `ng-change`, it will be validate when I still inputing something.

How to implement it?

> angular+unsubscribe@googlegroups.com.

[mario...@googlemail.com]

Hi Pawel,

thx for the quick help! I just created a live example due to the spec you posted http://jsfiddle.net/a95j5/5/

So is it possible to get the directive called just then when I loose focus? I don't want to get the directive called after the the first entry in the field! Just after I inserted e.g '2,11'...

Regards,

Mario 

[Pawel Kozlowski]

hi!

On Thu, Apr 12, 2012 at 2:54 PM, <mario...@googlemail.com> wrote:

> So is it possible to get the directive called just then when I loose focus?
> I don't want to get the directive called after the the first entry in the
> field! Just after I inserted e.g '2,11'...

OK, I didn't realize that you want to validate just after completing
all the input. There was a recent change when ngModelInstant was added
back and forth but ultimately was removed in rc4
(https://github.com/angular/angular.js/blob/master/CHANGELOG.md#1.0.0rc4)
as several people were rising concerns about it (search the mailing
list history for model instant to see the history).

Honestly, with the ngModelInstant removed (and binding behaving like
ngModelInstant by default) I'm not sure what would be the proper way
of triggering the validation only after control is loosing the
focus...

Cheers,
Pawel

[Pawel Kozlowski]

hi!

On Thu, Apr 12, 2012 at 2:50 PM, Freewind <nowi...@gmail.com> wrote:
> I've the same question, and I made a simple
> demo: http://jsfiddle.net/Freewind/zGm4p/

Corrected a bit the fiddle (change type of the input to "email" and
there was a bug in the alert): http://jsfiddle.net/zGm4p/2/

> What I want is to validate the email only if I lost focus on the input, e.g.
> press tab key, or click on the blank page.

Yep, I see, no clue how to do it properly in angular :-( But would
love to know the answer :-)

Cheers,
Pawel

[Peter Bacon Darwin]

This is becoming a recurring theme. I wonder if model changes are actually the best place for validation? Given the wide range of requirements perhaps an event based mechanism would be more flexible and perform faster.
My idea would be that every input directive would trigger events such as select,  change or blur. You then set up the form to trigger validation based on these events asking all the directives whether the are valid. Reasonable defaults should mean that most cases would work without unwanted declarations but that social cases can be configured on a form by form basis.
Pete

...from my mobile.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.

To post to this group, send email to ang...@googlegroups.com.

To unsubscribe from this group, send email to angular+u...@googlegroups.com.

[Vojta Jína]

We do validation on model update, because you want to have your the valid. (invalid view does not update model).

You can override input directive, to use "blur" event:

http://jsfiddle.net/JYTUB/1/

V.

[Peter Bacon Darwin]

OK I get it.  Two questions:

 - Are there ever any times when you would want an invalid model value?  I guess not - at least I can't think of any right now.  If there were some complex validation that relied on other inputs or state this would be done outside parsers?

 - I am interested in the way you override input in the app module.  What does this do to the ng-input directive?  Are both directives executed?  Or is it last declared wins?

Pete

[Carles Serrano]

Thanks for the example Vojta I also had the same problem.

Just a comment I would not overwrite the input directive, instead I would create an attribute directive to override this particular behaviour of the input directive. Just like ngModelInstand did. 

Here you have an adaptation of Vojta´s example to this approach. http://jsfiddle.net/carpasse/JYTUB/3/ 

If you do so you´ll be able to chose between updating the model instantly or just on the onblur event.

Also I´m not sure if adding a second input directive overrides completely the behaviour of the first one o just extends it.

Carles.

On Saturday, April 14, 2012 2:28:42 PM UTC+2, Vojta Jína wrote:

We do validation on model update, because you want to have your the valid. (invalid view does not update model).

You can override input directive, to use "blur" event:

http://jsfiddle.net/JYTUB/1/

V.

On Thu, Apr 12, 2012 at 7:00 AM, Peter Bacon Darwin <pe...@bacondarwin.com> wrote:

This is becoming a recurring theme. I wonder if model changes are actually the best place for validation? Given the wide range of requirements perhaps an event based mechanism would be more flexible and perform faster.
My idea would be that every input directive would trigger events such as select,  change or blur. You then set up the form to trigger validation based on these events asking all the directives whether the are valid. Reasonable defaults should mean that most cases would work without unwanted declarations but that social cases can be configured on a form by form basis.
Pete

...from my mobile.

On Apr 12, 2012 2:04 PM, "Pawel Kozlowski" <pkozlowski.opensource@gmail.com> wrote:

hi!

On Thu, Apr 12, 2012 at 2:54 PM,  <mario...@googlemail.com> wrote:

> So is it possible to get the directive called just then when I loose focus?
> I don't want to get the directive called after the the first entry in the
> field! Just after I inserted e.g '2,11'...

OK, I didn't realize that you want to validate just after completing
all the input. There was a recent change when ngModelInstant was added
back and forth but ultimately was removed in rc4
(https://github.com/angular/angular.js/blob/master/CHANGELOG.md#1.0.0rc4)
as several people were rising concerns about it (search the mailing
list history for model instant to see the history).

Honestly, with the ngModelInstant removed (and binding behaving like
ngModelInstant by default) I'm not sure what would be the proper way
of triggering the validation only after control is loosing the
focus...

Cheers,
Pawel

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.

To unsubscribe from this group, send email to angular+unsubscribe@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/angular?hl=en.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.

To unsubscribe from this group, send email to angular+unsubscribe@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/angular?hl=en.

On Saturday, April 14, 2012 2:28:42 PM UTC+2, Vojta Jína wrote:

We do validation on model update, because you want to have your the valid. (invalid view does not update model).

You can override input directive, to use "blur" event:

http://jsfiddle.net/JYTUB/1/

V.

On Thu, Apr 12, 2012 at 7:00 AM, Peter Bacon Darwin <pe...@bacondarwin.com> wrote:

This is becoming a recurring theme. I wonder if model changes are actually the best place for validation? Given the wide range of requirements perhaps an event based mechanism would be more flexible and perform faster.
My idea would be that every input directive would trigger events such as select,  change or blur. You then set up the form to trigger validation based on these events asking all the directives whether the are valid. Reasonable defaults should mean that most cases would work without unwanted declarations but that social cases can be configured on a form by form basis.
Pete

...from my mobile.

On Apr 12, 2012 2:04 PM, "Pawel Kozlowski" <pkozlowski.opensource@gmail.com> wrote:

hi!

On Thu, Apr 12, 2012 at 2:54 PM,  <mario...@googlemail.com> wrote:

> So is it possible to get the directive called just then when I loose focus?
> I don't want to get the directive called after the the first entry in the
> field! Just after I inserted e.g '2,11'...

OK, I didn't realize that you want to validate just after completing
all the input. There was a recent change when ngModelInstant was added
back and forth but ultimately was removed in rc4
(https://github.com/angular/angular.js/blob/master/CHANGELOG.md#1.0.0rc4)
as several people were rising concerns about it (search the mailing
list history for model instant to see the history).

Honestly, with the ngModelInstant removed (and binding behaving like
ngModelInstant by default) I'm not sure what would be the proper way
of triggering the validation only after control is loosing the
focus...

Cheers,
Pawel

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.

To unsubscribe from this group, send email to angular+unsubscribe@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/angular?hl=en.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.

To unsubscribe from this group, send email to angular+unsubscribe@googlegroups.com.

[Vojta Jína]

All directives are executed.

[Peter Bacon Darwin]

In the order given by the priority?

[Vojta Jína]

Yes

[Jon]

Thank you for posting this!

I was so excited when model updates switched to onblur... and then utterly perplexed when all my jquery-ui datepicker fields suddenly stopped updating the models. Granted I preferred the onblur update as it felt cleaner to me, oh well. This has helped a lot. Now to go update all my forms...

Jon

[Mark Shercliff]

From my testing, invalid input DOES update the model/scope. In fact it absolutely has to to fulfil the two-way data binding, else you'll end up with disparity between the two. Correct me if I'm wrong?

[Tomaz Zaman]

I actually found it easier to "hide" validation messages, using general sibling selector with CSS, something in the lines of:

[css]

textarea:focus ~ .error { display:none; }

[/css]

The only requirement is that textarea and error have the same parent element (they are siblings, but the order isn't important).

[Khanh Nguyen]

Vojta,

Do you know why the directive you created above would not work with the latest AngularJS 1.2.x?

Thanks,

Khanh

[Khanh Nguyen]

Never mind.  I found that ngModelCtrl has been changed to ngModelController in 1.2.x.

Thanks for creating  a directive like that.

[Daniel Tabuenca]

That’s not the reason. It doesn’t matter what you name the controller parameter in the link function, you could name it theControllerForTheDirectiveNgModel and it would still work. The problem is that the order that priority is applied has changed causing Vojta’s directive to execute before the built-in input directive. You need to make sure the new directive has larger priority so that it will execute after the built-in. Since built-in directive has a priority of 100, adding a priority of 101 will make sure it executes after and make everything work as expected.

[Khanh Nguyen]

I did not know about the priority.  So how do you know built-in directive having a priority of 100?

[Daniel Tabuenca]

I don't think it is documented anywhere other than in the code. Looking at the code it looks like actually it doesn't set a priority so it should be default priority of 0. This means setting your directive priority to just 1 should do the trick.

[Khanh Nguyen]

How do we check input element's  $error on blur to display an appropriate error message based on minlength, maxlength, required, pattern, etc...?

[Khanh Nguyen]

Right now, we check errors of minlength, maxlength, max, min on every keystroke input.

I want to to check errors of those but on blur.

Anyone has a suggestion or solution for that?