enter key to trigger ng:click on "submit" button

[Thomas]

What is the best or recommended way to trigger the "submit" button
ng:click in an angular enabled jquery dialog? Examples I have seen all
require the button to receive focus first. I would like to have
something similar to the behavior of the type="submit" element within
a form where hitting enter would trigger the submit action, w/o having
to tab to the button first.

Thanks,
Thomas

[Igor Minar]

hi there,

it's been a while since I did this, but if I recall correctly wraping the input box in a form and using ng:submit on the form instead of ng:click on the button does the trick.

/i

--
You received this message because you are subscribed to the Google Groups "angular" group.
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.

[Thomas]

Thanks Igor, I will give that a try also.

What I have found working is also based on having the form wrapped
around the inputs, plus an extra "hidden" button, that will enable the
"submit" behavior:

<form id="loginForm" action="javascript:{}">
<fieldset>
...
</fieldset>
<button type="submit" id="loginButton" ng:click="login()"
disabled="{{hasInvalidWindgets()}}">Login</button>
<button style="width:0;border:0;margin:0;padding:0;"
ng:click="login()" disabled="{{hasInvalidWindgets()}}"></button>
</form>

The style trick is needed because the button with display:none will
only work in FF and visibility:hidden won't work in either Chrome or
IE9.

[Igor Minar]

uhhh.. that's ugly.. try ng:submit instead.

/i

[Thomas]

Ugly indeed. I moved ng:click from the "invisible" button to ng:submit
on the form. The fake button is still needed as that is the only way
submit will be triggered when hitting enter (it seems enter only works
with at least 2 buttons).

[Igor Minar]

you don't need two buttons

http://jsfiddle.net/CHVbb/118/

/i

[Thomas]

Hi Igor,

Thanks, a fiddle would have highlighted the real issue I'm having here
sooner. I misstated the problem. It is a limitation of the jQuery
dialog widget. It won't allow me to define a form as part of the
markup that encloses both the input fields and the buttons (under .ui-
dialog-buttonset). In the final dialog those buttons are outside the
form tag. I completely forgot when opening the dialog I move the
Angular enabled button into the appropriate button section. Hence I
need that invisible button within the form to get the submit-on-enter
behavior.

Thomas

[Igor Minar]

I see...

[zdam]

Hi,

I just tried this in 1.0rc0 and the enter key is not triggering the submit.

Here is an updated fiddle:  http://jsfiddle.net/zdam/EGjHV/ 

Has the mechanism to do this changed in this version?

Thanks, Adam.

/i

> > > > 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
> > "angular" 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 "angular" group.
To post to this group, send email to ang...@googlegroups.com.

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

[Witold Szczerba]

The mechanism was not changed. More than that, the 'enter' key
submitting the form is handled by the browser, not Angular.
Your example does not work, because it was broken, here is working version:
http://jsfiddle.net/witoldsz/EGjHV/2/

Regards,
Witold Szczerba

>>> > > > > angular+u...@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
>>> > > "angular" group.
>>> > > 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.
>>>
>>> --
>>> You received this message because you are subscribed to the Google Groups
>>> "angular" group.
>>> 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.
>>>
>>
> --
> 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/-/dTpHg7LiImsJ.

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

> angular+u...@googlegroups.com.

[Witold Szczerba]

It looks as I send the response too quickly. There is one problem in
that example:
http://jsfiddle.net/witoldsz/EGjHV/2/
'Enter' does submit form, but binding in Angular 1.0rc1 is on blur, so
the model update does not get triggered.
So one has to:
a) enter something into the text input field,
b) move focus to something else,
c) then one can hit enter or go back and hit enter.

Without loosing focus, the submitted data is incorrect. Of course I
can add 'ng-model-instant' but binding on blur was not introduced just
so we would have to disable it.

Regards,
Witold Szczerba

[Igor Minar]

this is a bug. can someone create an issue for this?

we need to think about this blur thing as its causing all kinds of weird issues.

/i

[Sean Gilligan]

On 3/20/12 4:24 PM, Igor Minar wrote:
> we need to think about this blur thing as its causing all kinds of
> weird issues.

I just had to add an [ng-model-instant] to username, password input
fields that are [required] because I was using [ng:disabled] on a
"Login" button based upon whether the fields were blank or not.

-- Sean

[Vojta Jína]

Yep, we need to update model (even without ng-model-instant):

- on enter

- when the element is being hidden (e.g. using ng-hide/ng-show, basically setting display: none, as browsers don't trigger blur)

Any other ?

I will take care of it.

V.

[Hekke]

How about making this new behaviour opt-in instead? ng-lazy or ng-defer or something?

/Hekke

[Robert B. Weeks]

Hello - 

I agree with this as well. 

Making it like before and having the option be for non-immediate seems to be better. Has been kind of a bear to try and track down all the issues in our apps that are related to just this change.

Thanks.

[Peter Bacon Darwin]

How about some kind of directive Provider that allows you to configure the ng-model-instant to be on or off by default at the start of the application?

[Robert B. Weeks]

This is kind of what I was suggesting in the thread "0.10.7 - auto updating of model information {{XX}}" :

    Response:  "Sure, you can define "input" directive with copy pasted model-instant and you are done."

I didn't end up doing this - but getting deeper into conversion - this has shown some side effects that are troublesome. 

[Kai Groner]

If the model is updated but ng:change is still deferred (unless ng-model-instant), this would more closely match what html forms do by default.


Kai

[Sean Gilligan]

On 3/21/12 2:04 AM, Vojta J�na wrote:
> Yep, we need to update model (even without ng-model-instant):
> - on enter
> - when the element is being hidden (e.g. using ng-hide/ng-show,
> basically setting display: none, as browsers don't trigger blur)
>
> Any other ?

Yes. The case I mentioned where I have ng:disabled="{{disableLogin()}}"
and the disableLogin() function is dependent upon the model.
Maybe that's just a case where you have to us ng-model-instant, but it
seems like a pretty common case. Maybe the presence of ng:disabled
attributes within the form would automatically set model-instant?

-- Sean

[Vojta Jína]

So are you saying that most of the time, you are going to change all inputs to use ng-model-instant ?

Even after we fix the problems (updating on enter etc..) ?

Then, changing to ng-model-lazy (or something like that), might be better solution.

We thought that most of the time, you are fine with onblur update and it can have big impact on performance.

Thanks for input guys,

V.

On Wednesday, March 21, 2012 10:23:22 AM UTC-7, Sean Gilligan wrote:

[zdam]

I think instant or lazy should be app-wide configurable.

I imagine most folks running their apps in desktop web-browser will have enough performance and instant would be desired.

If you run your app on a mobile  then I imagine you might detect that and want to switch Angular to use lazy.

Cheers, Adam.

[Marcello Nuccio]

The problem, is when I use ng-disabled on submit button, to avoid submission with invalid values.

Look at http://jsfiddle.net/marcenuc/WtdWX/

If you click the checkbox, the button is instantly enabled.
If, instead, you write "b" in the text-field, you can't use the mouse to click the button.

I use ng-disabled on submit button most of the time, then I will be forced to put ng-model-instant on all input elements.

Marcello

[Vojta Jína]

Well, yep, but I'm afraid, there is no way around - if you want to update the disabled property immediately, we need to listen on key strokes.

However, we might delay it - e.g. update the model only twice per second or so - that should be configurable...

V.

[Sean Gilligan]

On 3/22/12 1:41 AM, zdam wrote:
> I think instant or lazy should be app-wide configurable.
>
> I imagine most folks running their apps in desktop web-browser will
> have enough performance and instant would be desired.
>
> If you run your app on a mobile then I imagine you might detect that
> and want to switch Angular to use lazy.

I suppose for mobile you could use lazy/non-instant and then, using the
same setting turn off the test that visibly disables the login (submit)
button (in my username/password/login scenario or similar use cases) If
you have a dynamically updated submit button and required fields you
have to check on every character (or with a slight delay) to enable the
button, so maybe the instant validate feature has to turn off when
model-instant isn't active. That might be the right tradeoff.

-- Sean

[Sean Gilligan]

On 3/22/12 9:28 PM, Vojta J�na wrote:
> Well, yep, but I'm afraid, there is no way around - if you want to
> update the disabled property immediately, we need to listen on key
> strokes.

You can see the same issue in this fiddle that Misko just posted:
http://jsfiddle.net/7HcFZ/

Click on the author input, then tab to the title field and type
something but don't leave the field. It's hard to figure out what's
going on in the form because the create button is disabled.

-- Sean

[Marcello Nuccio]

I thought that disabling of the submit button when the form is invalid, was the most common use-case. What is the Angular way to prevent submission of invalid forms?

However there are two thing that bugs me:

1. I think ng-model-instant should be put on the form widget. Having to put it on all the input fields of a complex form, makes the form much more complex. Obviously I'm assuming that, if you need ng-model-instant on a field, most likely you need it for all the fields in the same form.

2. It isn't intuitive that on select, checkbox, and radio, ng-model-instant is the default.

Marcello

[Vojta Jína]

Having ng-model-instant on form is interesting idea.

select, checkbox, radio have all click/change event - that's a different story, that happens only once, ng-model-instant / lazy  does not make any sense there...

V.

[Sean Gilligan]

On 3/23/12 1:15 AM, Vojta J�na wrote:
> Having ng-model-instant on form is interesting idea.

It sounds right to me. It also might be nice to drive it from a
variable. So one could do something like this:

<form name="loginForm" ng-model-instant={{!mobile}}>
<input type="text" name="username" ng:model="username" required>
<input type="password" name="password" ng:model="password" required>
<button type="submit" ng:disabled="{{disableLogin() && !mobile}}"
ng:click="login(username,password)">Log In</button>
</form>

-- Sean

[Marcello Nuccio]

Il giorno venerdì 23 marzo 2012 09:15:49 UTC+1, Vojta Jína ha scritto:

Having ng-model-instant on form is interesting idea.

 I don't know how difficult it is to do, but it would be really helpful. Should I open a bug for this?

select, checkbox, radio have all click/change event - that's a different story, that happens only once, ng-model-instant / lazy  does not make any sense there...

I know. I'm only saying that I find it unintuitive...

Marcello
 

[Johan Steenkamp]

Late to the discussion but I'm also finding myself using ng-model-instant frequently. 

My problem is similar to those discussed - disable submit button and want to enable it as users complete fields without errors.

Johan

Adding a config option or form attribute look like good alternatives.

[Vitaly]

hi, 

In your example http://jsfiddle.net/witoldsz/EGjHV/2/

I can’t get value with whitespaces on left or right, the value is trimmed. How to get not trimmed value from input?

Vitaly

21 марта 2012 г. 3:15 пользователь Witold Szczerba <pljos...@gmail.com> написал:

[Vojta Jína]

Hmmm, interesting... What's your use case ?

You can't simply remove it. You can add a parser (through directive),
that would check the view and add the spaces back :-D

I don't know, we might remove the trimming or allow configuring directives...

V.

2012/3/28 Vitaly <chernov...@gmail.com>:

[Vojta Jína]

Sorry - by checking the view I meant the value in input.

V.

2012/3/29 Vojta Jína <vojta...@gmail.com>:

[Vitaly]

so, what is the way to get raw input value without being changed at all?

29 марта 2012 г. 12:36 пользователь Vojta Jína <vojta...@gmail.com> написал:

[Vitaly]

Use case is for password validation. There is sample for password validation but it seems not working. I can not wrap my head around it, please help!

http://jsfiddle.net/vojtajina/9q3k3/ 

29 марта 2012 г. 12:36 пользователь Vojta Jína <vojta...@gmail.com> написал:

Sorry - by checking the view I meant the value in input.

[Marcello Nuccio]

http://jsfiddle.net/marcenuc/9q3k3/18/

2012/3/29 Vitaly <chernov...@gmail.com>:

[Vitaly]

Marcello, thank you a lot!

I helped me figure out at last how it works beneath the surface

29 марта 2012 г. 19:29 пользователь Marcello Nuccio <marcell...@gmail.com> написал: