Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Default "Please select..." style option for select fields. #55

Open
smartredfox opened this issue Jul 16, 2015 · 6 comments
Open

Default "Please select..." style option for select fields. #55

smartredfox opened this issue Jul 16, 2015 · 6 comments

Comments

@smartredfox
Copy link

I would like an example that demonstrates:

How to set a default option for select fields that doesn't pass validation - basically an option with the value set to an empty string/null etc. I think this is a regular feature where the user is prompted to "please select..." but I can't find any way of doing it.

I've tried to figure this out, but seem to be getting nowhere. If it makes any difference I'm loading the values from an ajax call and filling them. When the first option has an empty string value it adds an extra option before it like this:

@kentcdodds
Copy link
Member

I'll see if I can find time to make this example eventually. But basically here's what I recommend:

  1. First try to figure out how you would do it without angular or angular-formly. How would you accomplish the basic idea with pure HTML/JavaScript/CSS?
  2. Then try to figure out how you would accomplish ☝️ that solution with angular (but without angular-formly)
  3. Then try to figure out how to you would accomplish ☝️ that solution with angular-formly.

I find this is a much easier approach to figuring out how to do things with angular-formly.

@smartredfox
Copy link
Author

Thanks for the response. That's kind of what I did though and it didn't work :(

I added an option like this to the beginning of my options array for the select field :

{
code: '',
name:'Please select'
}

(I have the valueProp and the labelProp set as well). But this caused the odd issue with the extra option item getting added.

Thanks
James

@kentcdodds
Copy link
Member

Sorry I don't have time to help right now, but here's the one I use at work that allows for this functionality. Maybe it'll be helpful to you: https://gist.github.com/kentcdodds/bacc2658bfbcbaa135f1

(Note, I've verified that this is not possible with formly bootstrap currently, if you'd like to make a PR I'd love it).

@smartredfox
Copy link
Author

No worries - thanks for the code. I'm using formly bootstrap, so it's just good to know it's not just me missing something really obvious :)

I'll take a look and see if I can figure out how to get it working in bootstrap. If I do I'll feed it back.

@smartredfox
Copy link
Author

Forgot to also add - I really love Formly! This feels like the natural way that Angular should actually be forms :)

@kentcdodds
Copy link
Member

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants