Angular dropdown/select required always says it is valid - validation

So I have a dropdown and I am using angular to build it. Minutes is an array of numbers [0,1,2....59]. The filter is a simple filter that displays the digits from 0-9 as 00, 01... etc.
<select ng-model="addObj.StartMinute"
ng-options="m as m | pad2Digit for m in Minutes"
required
name="startMinute">
<option value="">-- select --</option>
</select>
My problem is that this ALWAYS reports being valid. I have removed the option in there that lets me customize the option used when no match is found, and that doesn't change it. I have tried setting StartMinute to null, -1 and undefined and still the select ALWAYS says it is valid.
I have found so far that the problem has to do with my using simple numbers rather than binding to objects. In cases where I am doing a dropdown with more a collection of objects, required validation is correctly detecting that nothing is chosen. I would have thought that setting the initial value on the above dropdown to null would work, but it isn't. So does anyone know how to use required validation on a dropdown that is bound to an array of numbers?

There must be something else on the project where it wasn't working making this not work because the raw jsfiddle I threw together to try to demo the problem works properly. If the initial value is null, then the validation does fail like I would expect.
HTML
<div ng-app="app">
<div ng-controller="ctrlDropdown">
<form name="testForm">
<select ng-model="number1"
ng-options="num for num in numbers"
required
name="ddl1">
<option value="">- select - </option>
</select>
<br/>failsValidation: {{testForm.ddl1.$error.required}}
</form>
</div>
</div>
JS
var app = angular.module("app",[]);
app.controller("ctrlDropdown",function($scope){
$scope.test = "wee";
$scope.number1 = null;
$scope.numbers=[1,2,3,4,5,6];
});
http://jsfiddle.net/NBhTT/

Related

How to check the text of the current state of a select component in Cypress?

I have a select box that originally has no value selected. The box shows as empty, and I would like a cypress test to check that there is no currently selected option, basically check that the select box displays no value.
How can I do that? I tried something like this:
cy.get('#filter-dropdown').should('have.text', '')
But this doesn't work because the text that it checks is a concatenation of all of the options together.
This is the HTML:
<select data-v-1="" id="filter-dropdown"
<option data-v-11d8b3dc="" value="a23"> Add Test </option>
<option data-v-11d8b3dc="" value="532"> Algo</option>
<option data-v-11d8b3dc="" value="732"> Another</option>
</select>
Edit: this is the same question I have, but the answer does not resolve the issue, probably why the answer was not accepted...
Stack Overflow
You can apply an assertion like this:
cy.get('#filter-dropdown')
.invoke('val')
.then((val) => {
expect(val).to.be.null
})

How to capture values from dropdown in JMeter

For code like below:
<div class="col-xs-4 col-sm-4 col-md-4 select-me show_me del_nxt" style="display: block;">
<select class="prime" name="primary" id="primary" onchange="newsecondary(this)">
<option value="none" id="1200">---Select main---</option>
<optgroup label="dummy1">
<option value="abc-2-1">abc</option>
<option value="xyz-2-1">xyz</option>
</optgroup>
<optgroup label="Dummy2">
<option value="abc1-2-1">abc1</option>
<option value="C1-2-1">C1</option>
<option value="D1-2-1">D1</option>
</optgroup>
</select>
<span class="Error"></span>
</div>
How to capture random value from dropdown list? thanks in advance.
Scenario is we have 4 drop downs with same type of html code as above.
Unless user selects any value from first drop down, another wont get enabled. this is how these 4 dropdowns are dependant on previous dropdown value .
Since content is html, the most maintainable way is to use CSS Selector Extractor based on this syntax:
Configuration would be the following:
You may use Regular Expression Extractor added to your request.
With the Regular Expression:
option value="([a-zA-Z0-9])+"
To ectract random value you need to set Match No to 0 as shown below
You may test your RegExp here regexr.com
Read more about Regular Expressions
If you want to select a random value and forget - go for HTML Links Parser
If you need the selected value anywhere else - you can extract it using i.e. XPath Extractor, it allows executing arbitrary XPath queries.
Get text of the selected option:
//select/optgroup/option/#selected/parent::*/text()
Get all options for optgroup with the label of dummy1
//select/optgroup[#label='dummy1']/option/#value
etc.

Unreliable behavior in Thymeleaf's th:selected attribute

I have a project using Spring Boot and Thymeleaf for rendering html pages. In one of the pages, I have the following html to have Thymeleaf select an option:
<select name="value" id="usersWarning">
<option value="0" th:text="#{button.disabled}">0</option>
<option value="0.5" th:selected="${warning} == 0.5">50%</option>
<option value="0.75" th:selected="${warning} == 0.75">75%</option>
<option value="0.9" th:selected="${warning} == 0.9">90%</option>
<option value="0.95" th:selected="${warning} == 0.95">95%</option>
</select>
Thymeleaf works as expected if warning equals 0.5 or 0.75, but if warning equals 0.9 or 0.95, Thymeleaf does not add the selected attribute to that option. I added the following option to see if my warning values are wrong:
<option th:text="${warning}"></option>
but in each case Thymeleaf shows 0.9 or 0.95 correctly.
Thank you for your help. This has been driving me crazy for the last hour.
I would recommend trying
${#numbers.formatDecimal(warning, 0, 2) == '0.95'}
This should format the number as a string with two decimal digits allowing you to perform string comparison on the result.
This might be necessary because floating point comparisons can have very small rounding errors that cause a strict comparison to fail. Formatting as string rounds the number to fewer decimal places and gets rid of the small error that would otherwise cause the comparison to fail.

Thymeleaf - how to link <select> th:value with message bundle?

I have this select:
<select class="form-control" th:field="*{objId}" name="objId" >
<option th:each="obj : ${objList}"
th:value="${obj.getId()}"
th:selected="${objList.contains(obj)}"
th:text="${obj.getDescription()}">
</option>
</select>
The description for the default object obj is 'Object not valid'.
Is it possible to internationalize its value? So when the object appears on this list it reads for instance, in Portuguese, "Objeto"?
to use internationalization you should use separate message file for each language you support and display description as follows:
th:text="#{${obj.getDescription()}}">
but in this case obj.getDescription() should return message key as its value (for example object.description.message), and this key has to be present in messages_pt.properties file like for example:
object.description.message="Objecto"
Maybe I didn't understand you correctly, and you want only display different value when description is null. In this case the code below should resolve problem:
th:text="${obj.getDescription()}?: 'Description is null...'"
or
th:text="${obj.getDescription()}?: #{message.property.key.here}"
HTH

xpath for selecting multiple elements from drop down

I am trying to extract some information from an html page. Consider the drop down select list below:
<select name="ctl00$MainContent$ddlColor" onchange="chageColor(this);setTimeout('__doPostBack(\'ctl00$MainContent$ddlColor\',\'\')', 0)" id="ctl00_MainContent_ddlColor" class="input" style="width:175px;">
<option selected="selected" value="">Color</option>
<option value="00114743-03|large|0|03">CHARCOAL</option>
<option value="00114743-04|large|2|04">BLACK</option>
</select>
It has 3 values, "Color", "CHARCOAL" and "BLACK".
Now if I view the source and copy XPATH of "CHARCOAL" using google chrome, I get
//*[#id="ctl00_MainContent_ddlColor"]/option[2]
However, I want to extract the information as "CHARCOAL" and "BLACK". I want this to be applied on multiple pages where the drop down list might contain more or less number of elements. However, I always want to skip the first element, which will be "Color". How to do this ?
Here you are ..
//select/option[not(contains(., 'Color'))]/text()
You can skip the first option by it's position by this
//select/option[position() > 1]/text()
I hope this could help

Resources