I have the following dropdownlist/ selectlist in my form:
<select class="form-control" id="properties" name="properties1"><option value"35" disabled>white (Sold Out)</option><option value"36" disabled>yellow (Sold Out)</option><option value"37" >blue </option></select>
Why is this returning the value between the option tags instead of the value of the options? I need the Id's ofcourse.
I am using Laravel and process this form data with this tag: Input::get('properties');
That's because the syntax of the HTML is wrong.
You are missing the equals sign between the attribute names and attribute values. The value"35" should be value="35".
Related
I would remove the blank first option from a select ng-model and put instead the first value of an array.
Here is my code:
<div class="col-9">
<select ng-model="chooseOrg"
formControlName="orgTypeId"
class="editmodal-object">
<option [ngValue]="orgType.id" *ngFor="let orgType of allOrgType" style="text-transform:uppercase;">{{orgType.description}}</option>
</select>
</div>
My array has no blank value inside, but it's composed of 5 object. I just want the first one always the default value of my select.
Since you are using ngmodel you should have it changed when you change the formControlName. I think having both makes it not working properly. So remove ngmodel and rely on formControlName and check for changes and set chooseOrg that way.
Another good thing to know is that you can set the default value for new FormControl() by having the default value 1 for example in the method like this:
new FormControl(1)
I made a stackblitz for you to show you what I mean. https://stackblitz.com/edit/angular-ivy-klwglz?file=src/app/app.component.html
I have input fields which are dates (no time) and I use an input field with type=date for date selection. The value is tied to the model using the asp-for attribute. When a user incorrectly selects a FROM date that is later than the TO date, my action reverses the dates so they are displayed the correct way round. However, the HTML values maintain the previously selected values and not the newly posted, corrected values. In effect, the asp-for is ignoring the latest value in the model.
The Model property is a DateTime and not a string and I don't use DataAnnotations in this case.
<input type="date" asp-for="DateFrom"
min="#Model.EarliestDate.ToHtmlInputDate()"
max="#Model.LatestDate.ToHtmlInputDate()"
onchange="$('form').submit();" class="form-control">
I found a simple fix for the issue. I'm not sure if treating the value as a string rather than a DateTime will also be a cure but that rather gets away from the fact that fundamentally it is a date.
I already have a class extension helper to get the required HTML format date so I set this string result to the VALUE of the element and this appears to work in all scenarios
<input type="date" value="#Model.DateFromString" asp-for="DateFrom" min="#Model.EarliestDate.ToHtmlInputDate()" max="#Model.LatestDate.ToHtmlInputDate()" onchange="$('form').submit();" class="form-control">
I am attempting to create a select in my Angular app based on a classificationsList array from the component. As of now, the view initiates with the first value already "selected", but validation marks it as an invalid response.
If I select the dropdown and choose the other option, it returns valid.
(before selection)
(after selecting)
But when I go back to select "Class 1" it registers as invalid again.
What I'm expecting this to do is have the default, empty option (like below), that disappears once a real option is selected. The difference between these two lists is that the classificationsList is dynamic, whereas the the department list is static.
In fact, I took the html block from the department list and just added the *ngFor piece. Can someone tell me what I'm doing incorrectly, here? The issue isn't strictly with the validation, however. The bigger issue is the fact that it defaults to the first value in the array instead of an empty value like Department. When I put an empty string into the first item of the array from the component side, it selects the empty value like it selects "Class 1" as you've seen.
The validation actually performs fine here, as the empty string is invalid, and the rest of the array items are valid. In this scenario, though, there is an empty string still available in the option.
<div><label for="titleClass">Title Classification</label></div>
<select name="titleClass" id="titleClass" ngModel required>
<option *ngFor="let class of classificationsList">{{class}}</option>
</select>
</div>
I got it! The functionality I was looking for required me to set a default value (unattached to the array). For this one, I set the default as null like below.
<div class="formBoxRows">
<div><label for="titleClass">Title Classification</label></div>
<select name="titleClass" id="titleClass" ngModel required>
<option *ngFor="let class of classificationsList" [value]=null>{{class}}</option>
</select>
</div>
I have a scenario where i need to display options in dropdown with binded value and some text prefix to it
html:
<select ng-model="rounds" ng-change="fnTopRating(rounds)" class="col-xs-4" ng-options="rounds for rounds in [1,2,3,4]">
<option value=''>round wise</option>
<option>Round {{rounds}}</option>
</select>
but here i am not getting round 1,round 2... in drop down instead i am getting 1,2,3,4...
I am not clear with what is happening .
Any help is appreciated.
Well, at first your syntax is a bit wrong. I'd recommend you to check the docs.
To add a prefix in your options you should use single quotes, like this:
<select ng-model="rounds" ng-change="fnTopRating()" class="col-xs-4" ng-options="'round ' + r for r in [1,2,3,4]">
<option value label="round wise"></option>
</select>
Note: You just need to use $scope.rounds in your controller to get the selected item in fnTopRating() function, you don't need to pass it as parameter.
I have a select box.
When no value is selected, I have the empty option --. It's OK !
Once an option is selected, the empty option disappears.
But I would like that it is always there to have the opportunity to choose --.
Is it possible ?
<select ng-model="project" ng-options="act.id as act.name for act in actors"></select>
please see here:http://plnkr.co/edit/SWpRZA1dafNNva70z6KE?p=preview
<select ng-model="project" ng-options="act.id as act.name for act in actors">
<option value="">--<option>
</select>
ng-options gets priority when any option is selected from .
As per the standard html can contain . Thus the mentioned option gets priority as the selection is null.
And in view, html priority is higher, thus always value is seen unless the ng-option value already selected from controller.