If I have an enum in my JDL file that looks like this:
enum Country {
UNITED_STATES_OF_AMERICA,
CANADA,
MEXICO
}
When I use the enum in an entity:
entity Foo {
country Country required
}
, the resulting dropdown in foo-update.component.html is:
<select class="form-control" name="country" [(ngModel)]="foo.country" id="field_country" required>
<option value="UNITED_STATES_OF_AMERICA">UNITED_STATES_OF_AMERICA</option>
<option value="CANADA">CANADA</option>
<option value="MEXICO">MEXICO</option>
</select>
Is there a better way of mapping the value with a "display value" than just manually making the adjustment in foo-update.component.html? I'd also have to make some kind of Angular Pipe in order for it to look right on foo.component.html and foo-detail.component.html
Ideally, the JDL enum would let me do something like:
enum Country {
UNITED_STATES_OF_AMERICA("United States"),
CANADA("Canada"),
MEXICO("Mexico")
}
Is this being thought of already? If not I'm happy to help with a PR. I know it would be quite a bit of work since it not only requires changes to the JDL spec but also changes to the Angular and React generators.
Related
Is it possible to have the select placeholder grayed out coherently with other Angular 2 MDL form fields?
This is what I can obtain with default settings:
<mdl-textfield type="text" label="CAP..." formControlName="postcode" floating-label></mdl-textfield><br>
<mdl-textfield type="text" label="Città..." formControlName="city" floating-label></mdl-textfield><br>
<mdl-textfield type="text" label="Provincia..." formControlName="province" floating-label></mdl-textfield><br>
<mdl-select
placeholder="Nazione"
formControlName="countryid">
<mdl-option value="0"></mdl-option>
<mdl-option *ngFor="let country of countries" [value]="country.id">{{country.name}}</mdl-option>
</mdl-select>
The select placeholder "Nazione" appears in black. I'd like to have it grayed out just as the field "Cap...", "Città...", "Provincia...".
mdl2-angular-ext 0.6.0 should have proper placeholders now. You example code is correct, but for anyone else visiting this question, here's the code (again):
<mdl-select
placeholder="Nazione"
formControlName="countryid">
<mdl-option value="0"></mdl-option>
<mdl-option *ngFor="let country of countries" [value]="country.id">{{country.name}}</mdl-option>
</mdl-select>
Unrelated to your question, but since it was discussed in the comments regarding the question, the floating-label property works now too.
<mdl-select floating-label
placeholder="Nazione"
formControlName="countryid">
<mdl-option value="0"></mdl-option>
<mdl-option *ngFor="let country of countries" [value]="country.id">{{country.name}}</mdl-option>
</mdl-select>
I would like to apply the grouped text in listbox, looks like this
to
this is listbox in the resources page.
I tried to add the ‘optgroup’ tag into
'manager\templates\default\element\tv\renders\input\listbox-multiple.tpl'
but still not working, the 'optgroup’ tag will be ignored.
I unterstand that I should ‘Adding a Custom TV Input Type’ but the document didn’t include the details about grouping input values.
That is easy ;)
your listbox should contain a #CHUNK yourchunk
In that chunk you can perform nearly everything, that genereates a list, like:
<select name="something" id="something" >
<option value="" selected disabled>choose</option>
<optgroup label="Headline 01">
[[pdoResources? &parents=`0` &where=`{"template:=":40` &sortby=`{"value":"ASC"}` &limit=`40` &tpl=`pdoResourcesFormoption-something` &includeTVs=`some-tv`]]
</optgroup>
<optgroup label="Headline 02">
[[pdoResources? &parents=`0` &where=`{"template:=":41` &sortby=`{"value":"ASC"}` &limit=`40` &tpl=`pdoResourcesFormoption-something` &includeTVs=`some-tv`]]
</optgroup>
<optgroup label="Headline 03">
[[pdoResources? &parents=`0` &where=`{"pagetitle:=":"something"` &sortby=`{"value":"ASC"}` &limit=`40` &tpl=`pdoResourcesFormoption-something` &includeTVs=`some-tv`]]
</optgroup>
I'm a little bit confused with Angular and ng-options.
I have a simple array and I want to init a select with it. But, I want that options value = label.
script.js
$scope.options = ['var1', 'var2', 'var3'];
html
<select ng-model="myselect" ng-options="o for o in options"></select>
What I get:
<option value="0">var1</option>
<option value="1">var2</option>
<option value="2">var3</option>
What I want:
<option value="var1">var1</option>
<option value="var2">var2</option>
<option value="var3">var3</option>
So I tried:
<select ng-model="myselect2" ng-init=0 ng-options="options[k] as v for (k,v) in options"></select>
<select ng-model="myselect3" ng-init=0 ng-options="b as b for b in options"></select>
(But it didn’t work.)
Edit:
My form is submitted externally, which is why I need 'var1' as the value instead of 0.
You actually had it correct in your third attempt.
<select ng-model="myselect" ng-options="o as o for o in options"></select>
See a working example here:
http://plnkr.co/edit/xEERH2zDQ5mPXt9qCl6k?p=preview
The trick is that AngularJS writes the keys as numbers from 0 to n anyway, and translates back when updating the model.
As a result, the HTML will look incorrect but the model will still be set properly when choosing a value. (i.e. AngularJS will translate '0' back to 'var1')
The solution by Epokk also works, however if you're loading data asynchronously you might find it doesn't always update correctly. Using ngOptions will correctly refresh when the scope changes.
You can use ng-repeat with option like this:
<form>
<select ng-model="yourSelect"
ng-options="option as option for option in ['var1', 'var2', 'var3']"
ng-init="yourSelect='var1'"></select>
<input type="hidden" name="yourSelect" value="{{yourSelect}}" />
</form>
When you submit your form you can get value of input hidden.
DEMO
ng-selected
ng-repeat
If you setup your select like the following:
<select ng-model="myselect" ng-options="b for b in options track by b"></select>
you will get:
<option value="var1">var1</option>
<option value="var2">var2</option>
<option value="var3">var3</option>
working fiddle: http://jsfiddle.net/x8kCZ/15/
you could use something like
<select ng-model="myselect">
<option ng-repeat="o in options" ng-selected="{{o==myselect}}" value="{{o}}">
{{o}}
</option>
</select>
using ng-selected you preselect the option in case myselect was prefilled.
I prefer this method over ng-options anyway, as ng-options only works with arrays. ng-repeat also works with json-like objects.
<select ng-model="option" ng-options="o for o in options">
$scope.option will be equal to 'var1' after change, even you see value="0" in generated html
plunker
Is it possible to have an author dropdown select field in a SafeCracker form, in a similar way to how you can have a Status dropdown select field with the following code?
{status_menu}
<label for="status">Status</label>
<select name="status" id="status">
{select_options}
</select>
{/status_menu}
I've searched the docs and EE forums but can't find anything, but hoping there's a way of doing this.
Thanks for any help,
Ste
Edit:
Thanks to Tyssen's reply below, I've just implemented this solution in a SafeCracker form and it works great. Just one note though - the name should be author_id rather than author. Here's my final code, including a conditional to show the entry's current author:
<label>Author</label>
<select name="author_id">
{exp:query sql="SELECT member_id, screen_name, group_id FROM exp_members ORDER BY screen_name ASC;"}
<option value="{member_id}" {if "{member_id}" == "{author_id}"}selected="selected"{/if}>{screen_name}</option>
{/exp:query}
</select>
Use the query module maybe?
<select name="author">
{exp:query sql="SELECT member_id, screen_name
FROM exp_members
WHERE group_id = X;"
}
<option value="{member_id}">{screen_name}</option>
{/exp:query}
Hay all,
I am trying to validate a select in kohana 3.0 and I am using the necessary rules. However the validation does no "kick in" when the user does not make a selection.
<select id="discipline" name="discipline" >
<option value="0"> -- Select One -- </option>
<option value="-2">Information Technology and Engineering</option>
<option value="4">Business and Training Seminars</option>
</select>
That was my select, now i have applied these rules to the post array before i check for validation errors.
$post = Validate::factory($_POST)
->rule('discipline', 'not_empty')
->rule('discipline', 'numeric');
When I submit the form without making a selection, the form submits and the rules should stop it.
Any ideas ?
Your still putting a value for the first one, as 0. Leave the value as value="". 0 is numeric and considered not empty.
Replace 0 with blank string
Add ->rule('discipline', 'in_array', array(array(-2, 4))); to check that selected discipline is within valid collection.
string empty first option
<select name="fruit" required>
<option value="">select fruit</option>
<option value="banana">banana</option>
</select>
then some css may help
form:invalid button[type="submit"], form:invalid input[type="submit"] {
opacity: 0.5;
cursor: default;
}