Blank option on select, problem with form validation

[Alan Löffler]

Hi,

As some of you know, angularjs insert a blank option in the select inputs before the user selects one option. The solution to asign a value for the select in the controller works fine, and the blank option is prevent. The problem I have is when I use a select on a form. If I make form validation for the select, the action form is enabled because of the value asign in the controller (to prevent the blank option). I need the validation with user interactivity, and not with the direct asignement from controller.

The reason because I asign a value to prevent the blank option, is about the code I use for the select element (is a jquery code which uses Bootstrap styles). Every time I open the select, it reloads the options and repeat the last array value.

[Peter Bacon Darwin]

How about using $pristine/$dirty as well to prevent your form from being actionable before the user selects a value?

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Alan Löffler]

I'm going to read about those functions, thanks for the tip Peter, again.

[Alan Löffler]

I think ng-pristine and ng-dirty are not my solution.

Check this fiddle: http://jsfiddle.net/d4sXx/2/

I have form validation with the select input. What I want is not have the blank option in the select input when loads, before user interaction.

If you uncomment line 15 on that jsfiddle, the blank option isn't at the load anymore, but the form button has validation as valid. I need user interaction to make it valid, no matters the select input has an option selected from the beggining (line 15).

El viernes, 22 de febrero de 2013 18:57:22 UTC-3, Peter Bacon Darwin escribió:

[Peter Bacon Darwin]

How about this: http://jsfiddle.net/vG8bY/

[Pawel Kozlowski]

On Sat, Feb 23, 2013 at 3:05 PM, Alan Löffler
<alanmati...@gmail.com> wrote:
> I think ng-pristine and ng-dirty are not my solution.

If I understand your description correctly it would work:
http://jsfiddle.net/ZSDcP/

> I need user
> interaction to make it valid, no matters the select input has an option
> selected from the beggining (line 15).

IMO it might create rather bad user experience. How on earth a user
will know that she needs to interact with the select box?
And what is the already selected option is the "right one"? IMO empty
option (or an option with some specific text) make it explicit that
user action is needed.

Cheers,
Pawel


--
Looking for bootstrap-based widget library for AngularJS?
http://angular-ui.github.com/bootstrap/

[Alan Löffler]

Yes! Thanks a lot Peter.

El viernes, 22 de febrero de 2013 18:57:22 UTC-3, Peter Bacon Darwin escribió:

[Peter Bacon Darwin]

Snap!  I agree with Pawel.  At the very least you should have a dummy element, which indicates to the user that they need to make a selection. You can do this with a static empty option: http://jsfiddle.net/C5Ba2/

[Alan Löffler]

My problem is that I'm using a jquery custom select named selectpicker. When select loads, there's the blank option and the others from the array. When user interacts with the select, is added one more option at the end of the array, because of the initial blank option.

On load: 

-blank option

-Houses

-Apartments

-Grounds

When user interacts:

-Houses

-Apartments

-Grounds

-Grounds

Always the last option is duplicated because of the blank option. That's why I pre-select an option to avoid the blank one. I need the form validation so user interacts with the select and choose the right option, which could be the same as preselected or not. But I need the user interaction.

[Alan Löffler]

Yes, Pawel is right.

But what about if I have more than one select in my form?

MyForm.$pristine is for all the form. If I have two selects, the validation is valid with just one select interaction.

[Alan Löffler]

It works, I had a little code issue on my controller.

Thanks for the help guys.