AngularJS Validation doesn't check step-Restriction of a HTML number input - angularjs

Why is AngularJS not checking the step="0.01" attribute of the second input? For min and max attributes it works perfectly, but not for the step attribute.
For example: The input 0,005 will evaluate submitNewEntryForm.submitNewEntryAmount.$valid to true, but it shouldn't.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div ng-app="">
<form class="form-inline" name="submitNewEntryForm">
<div class="form-group" ng-class="submitNewEntryForm.submitNewEntrySubject.$valid ? 'has-success' : 'has-error'">
<label for="subject">Betreff:</label>
<input type="text" class="form-control" id="subject" required name="submitNewEntrySubject" ng-model="submitNewEntrySubject">
</div>
<div class="form-group" ng-class="submitNewEntryForm.submitNewEntryAmount.$valid ? 'has-success' : 'has-error'">
<label for="amount">Betrag:</label>
<input type="number" class="form-control" id="amount" required name="submitNewEntryAmount" ng-model="submitNewEntryAmount" step="0.01" min="0" max="99999">
</div>
<button type="submit" class="btn btn-primary" ng-disabled="!(submitNewEntryForm.submitNewEntrySubject.$valid && submitNewEntryForm.submitNewEntryAmount.$valid)" ng-click="">Submit</button>
</form>
</div>

Add regex, like \d+\.\d{0,2}
You can use HTML5 pattern="^\d+\.\d{0,2}$" or ng-pattern="^\d+\.\d{0,2}$". It changes error state without limiting html input to 2 decimal points.
To be strict, you should use ^\d{1,5}\.\d{,2}$
If you want number to have 2 decimal point but allow it to be without leading 0 like .01, you can use ^\d*\.\d{2}$

I didn't realize that there was a Angular directive for the step attribute. If you look at the documentation, it seems to be a very recent addition.
I find no mention of the step attribute until you get to a build of the un-released 1.5.9 version.
Latest version: https://docs.angularjs.org/api/ng/input/input%5Bnumber%5D
Notice in the "Usage" and "Arguments" sections that the step directive is listed. Now use the pull down menu in the upper left to change the version, and observe that there is no mention of the step directive.
Either this is a brand new, unreleased feature... or perhaps the documentation for older versions is not correct :)

Related

AngularJS - ng-maxlength

I've been through all of similar/relative topics on ng-maxlength on StackOverflow, but still could not find an answer. My problem is the following snippet of code:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div class="form-group field keywords-input-block">
<label>Keywords</label>
<form name="keywords">
<input class="form-control searchKeywordValidator"
type="text"
placeholder="Enter keywords..."
ng-maxlength="5"
name="keywordInput"
ng-model="vm.jobList.keywords">
<h1 ng-if="!keywords.keywordInput.$valid">The value is too long</h1>
</form>
</div>
The error message, which should be displayed only if the input is invalid, is constantly shown! Any advise on what it the reason for that and how could I get rid of it would be highly appreciated!
All angularjs applications must have a root element in order to allow angularjs to be able to effective on your view. And that is ng-app directive. This directive is to auto-bootstrap an AngularJS application
You must add it somewhere to the root element
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div class="form-group field keywords-input-block" ng-app="">
<label>Keywords</label>
<form name="keywords">
<input class="form-control searchKeywordValidator"
type="text"
placeholder="Enter keywords..."
ng-maxlength="5"
name="keywordInput"
ng-model="vm.jobList.keywords">
<h1 ng-if="!keywords.keywordInput.$valid">The value is too long</h1>
</form>
</div>
Read more about it here

How to show multiple values in an input element using Angular JS

I have an array of months like this
Array[0]
0
:
"January"
1
:
"February"
2
:
"March"
Now I need to show all three values of this array in one input element.
like
How can I do this using angular js. Please help
here's the html
<div class="col-md-4">
<div asterick class="form-group" ng-class="{'form-group has-success': !error['months'] && (submitted), 'form-group has-error': (error['months']) && (submitted)}">
<label for="months">Months</label>
<input type="hidden" name="year" ng-model="data.year" value="">
<input type="text" name="months" id="months" ng-model="data.months" class="form-control" ng-required="true">
<span class="er-block" ng-show="monthlyReportFormPage.months.$touched && monthlyReportFormPage.months.$error.required">Please select months.</span>
<span ng-show="error.months" class="er-block">{{error.months}}</span>
</div>
</div>
There're plenty of options:
I would recommend to take a look at Bootstrap Tags Input.
HTML:
<input type="text" value="html,input,tag" data-role="tagsinput"></input>
CSS:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.css">
JS:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script>
RESULT:
OR jQuery Tags Input Plugin by XOXCO:
OR you can do it using pure javascript. Here's an example.
Hey in case you work with angular 1.X try the ui-select plugin (https://github.com/angular-ui/ui-select/wiki). I think its exactly what you are looking for. Here are some examples https://angular-ui.github.io/ui-select/demo-multiple-selection.html.
best regards Peter

ng-disabled and form validation

When using angular's (1.5) forms support, I would expect that when a field is disabled, it should not be marked as invalid, because the user cannot possibly change the value.
However, as seen in the plunker below, where a field is required, but can be switched from enabled to disabled and visa versa by the checkbox, the form validation result does not change, the whole form is still invalid, although the value cannot be changed if the field is disabled.
http://plnkr.co/edit/OMZkoPgPZcHjO67JF88c?p=preview
Together with showing validation messages and submitting the form this poses a problem in UX and flexibility to use the angular validations to determine the state of the form and if it is ok to "submit it" (send AJAX to the server).
(the code below is in the plunker, I just pasted it here, because the code is required when linking plunker)
<form name="vm.form" novalidate>
<input ng-model="vm.model" ng-disabled="vm.disabled" required />
<label><input type="checkbox" ng-model="vm.disabled" />Disable field</label>
</form>
Form is invalid: {{vm.form.$invalid}}
Ok preety much here you dont normally do ng-disabled on the fields just on like the submit button as shown:
<input ng-model="vm.model" ng-minlength="4" ng-required="true"/>
<label><input type="checkbox" ng-model="vm.disabled" ng-required="true"/>Disable field</label>
<br><input type="submit" ng-disabled="vm.form.$invalid"/>
</form>
Form is invalid: {{vm.form.$invalid}}
</body>
</html>
Now if you try this it will work correctly as shown in Plunker.
you can manipulate the value of ng-required value based on whether the checkbox value is checked or not
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angularjs#1.5.0" data-semver="1.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="Asd as vm">
<form name="vm.form" novalidate>
<input ng-model="vm.model" ng-disabled="vm.checkbox" ng-required="vm.checkbox===false" />
<label><input type="checkbox" ng-model="vm.checkbox" />Disable field</label>
<input ng-model="vm.other" required/>
</form>
Form is invalid: {{vm.form.$invalid}}
</body>
</html>

How to fix date to minimum and maximum value to a html file

this code is not working i want to set min and max value to date is there any possibility to set value only useing html
<html>
<head>
<title>Date test</title>
</head>
<body>
<form>
<div class="list">
<div class="row">
<label class="item item-input">
<input type="date" placeholder="Meeting Date" name="mtgDate" ng-model='lead.meetingDate' ng-readonly="isReadonly" min="02/11/2015" max="01/12/2015">
</label>
</div><br>
<div class="row">
<label ng-show="frm.date.$dirty&&frm.date.$error.min" style="color:red;">below limit</label>
<label ng-show="frm.date.$dirty&&frm.date.$error.max" style="color:red;">Above limit</label>
</div>
</div >
</form>
</body>
</html>
html 5 has a new attribute for input type date
you can specific a field for date only like this
<input type="date" name="date" min="2015-11-02" max="2015-12-31">
Beware that not all browser has implemented this method. If you want cross browser compatibility, it is best to use JavaScript.
Here is a list of browser that supported date type attribute Browser supported list
Here is a working example (at least it worked in Chrome) Date Example
Here is a W3 spec on input type date W3.org

First sendKeys is always ignored in a consecutive sendKeys

I have a consecutive sendKeys opertions like blow:
elem1.sendKeys("value1")
elem2.sendKeys("value2")
elem3.sendKeys("value3")
After swithing the ordering freely,I notice that the first sendKey will always be ignored,and I am using
selenium 2.44.0
ubuntu 14.04 64bit
java 1.8
groovy 2.3.7
spock 1.0 for groovy 2.3
chromeDriver for linux 64bit
and I did some googling,found some guys suggest to put some sleeping,but It may bury problem,so I want to know what cause this problem?
Update:add actual html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="GDXPHJADNP">
<div class="GDXPHJADLP left">
<input warning="Email is invalid,and it should looks like:jessi#xmial.com" id="identifier" title="email" pattern="EMAIL" class="GDXPHJADOP GDXPHJADMP description descriptionLight warning" type="text">
</div>
<div class="GDXPHJADLP right">
<input id="password" title="password" pattern="PASSWORD" class="GDXPHJADOP GDXPHJADMP description descriptionLight" type="text">
</div>
</div>
<div class="GDXPHJADNP">
<div class="GDXPHJADLP left">
<input id="name" title="your name" warning="Name must be 1~30 characters" class="GDXPHJADOP GDXPHJADMP required description descriptionLight" type="text">
</div>
</div>
</body>
</html>
By the way,I am using PageFactory(provided by selenium's java api).I think if some values can be set into some inputs by sendKey,it means page object has been initialized correctly,and all elements have been find out correctly,is this assumption right?

Resources