I'm new in 'JavaScript AngularJS'. I'm writing because I need to know how to compare if data in my date-time picker is > of 40 year from today and if is not then I need to see an error.
Angular's documentation provides a nice example for it:
https://docs.angularjs.org/api/ng/input/input%5Bdate%5D
I've edited it to better suit your needs:
http://plnkr.co/edit/B8jATONx6yBMwWPAXspc?p=preview
<input type="date" id="exampleInput" name="input" ng-model="example.value"
placeholder="yyyy-MM-dd" min="1976-03-08"/>
{{myForm.input.$error}}
<div role="alert">
<span class="error" ng-show="myForm.input.$error.min">
Smaller than minimum!</span>
</div>
You basically need to add the min directive to an input. Once the input has an error, myForm.input.$error will contain all erroneous validators.
Related
I would like to achieve the behavior to restrict/limit users entr to only 10 numbers for ex:
Anyone know how to do this?
I do see that they have an attribute md-input-maxlength, but i am not able to get it work, or find an example.
Appreciate your inputs.
Extend from John Smith's answer, you can try
md-search-text-change="searchText = searchText.substring(0,10)"
I don't think there is currently an easy way to do it. However, as a hacky workaround you can use md-search-text-change and whenever the value is longer than X, you can just overwrite it with the first X characters of the value.
Example pen here
Keep in mind though, changing the text to a substring of it will cause another call for the text change event.
Combine 'md-maxlength' and 'maxlength'
eg.
input type="text" md-maxlength="512" maxlength="512"
Here's the working code:
<md-autocomplete flex=""
required
ng-init="searchText=''"
md-input-name="autocompleteAddField"
md-input-minlength="2"
md-input-maxlength="10"
md-no-cache="true"
md-selected-item="newE.add"
md-search-text="searchText"
md-items="item in vm.queryAddressSearch(searchText)"
md-item-text="item.address"
md-require-match=""
md-floating-label="Address">
<md-item-template>
<span md-highlight-text="searchText">{{item.address}}</span>
</md-item-template>
<div ng-messages="newEntityForm.autocompleteAddField.$error" ng-if="newEntityForm.autocompleteAddField.$touched">
<div ng-message="required">You <b>must</b> have a user address.</div>
<div ng-message="md-require-match">Please select an existing address.</div>
<div ng-message="minlength">Your entry is not long enough.</div>
<div ng-message="maxlength">Your entry is too long.</div>
</div>
</md-autocomplete>
You can use ng-maxlength="10". Here is an example. If the user type more than 10 characters then the form will be invalid. You can check this out.
<form name="form">
<input type="text" ng-model="model" id="input" name="input" ng-maxlength="10" />
<hr>
input valid? = <code>{{form.input.$valid}}</code><br>
model = <code>{{model}}</code>
</form>
if I provoke 'min-length' error and then try to provoke 'required' error, the latter isn't shown, although the input is underlined in red.
<md-input-container class="md-block">
<label for="register_password">Password</label>
<input required minlength="6" maxlength="100" type="password" name="register_password" id="register_password" ng-model="registerData.password">
<div ng-messages="registerForm.register_password.$error">
<div ng-message="maxlength">The password should be shorter</div>
<div ng-message="minlength">The password should be at least 6 characters long</div>
<div ng-message="required">Required</div>
</div>
</md-input-container>
Full working example:
http://codepen.io/AndriusRimkus/pen/mPEjYX
Thanks!
You should use the following code
<md-input-container class="md-block">
<label for="register_password">Password</label>
<input required minlength="6" md-maxlength="100"
type="password" name="register_password"
id="register_password" ng-model="registerData.password">
<div ng-messages="registerForm.register_password.$error">
<div ng-message-exp="['required', 'minlength']">
The password shold be at least 6 characters long</div>
<!-- <div ng-message="minlength">The password should be at least 6 characters long</div> -->
<div ng-message="md-maxlength">The password should be shorter</div>
</div>
</md-input-container>
So there are many things you should consider. Since you are using angular material design I think you should use md-maxlength which will show a hint for how many charcters written against maxlength. I am not sure if there is any md-minlength directive is available. Now require and minlength is kind of same thing so I think you should combine those two as a single error message. Now There are some specific things releated to [ngMessages][1] check the documentaion for detail explation. I'll say couple of things about that. By default ngMessges only displays one error message and if there are more than 1 error message are valid then which ever comes first in DOM will be displayed. you can use multiple or ng-messages-multiple to display more than 1 error messages. I suggest you should write you error in incrementing order like required first followed by minlength(If you want to display it seperately) and at the end md-maxlength. You can use ng-message-exp to combine more than 1 error codes.
Your code is correct but there is one point.
You are using an old version of AngularJS Material.
If You change the last script with this lines then your code will be run properly.
<!-- Angular Material Library -->
<!-- Version 1.1.4 -->
<script src="https://material.angularjs.org/latest/angular-material.min.js"></script>
Check online
Good Luck
Like others, I have been looking for a good way to validate my forms with Angular without the messages being too aggressive. The closest I have gotten is checking for $dirty and $touched prior to firing the messages. Which works for most situations.
The one situation I can't figure out is when the user edits, for example, a required field. The field has text in it, is valid, dirty, and touched. The user goes back into the field to change it. They backspace what is in the input and immediately the message fires because the input is now dirty, touched, and invalid. I'd rather it "reset" at that point and reevaluate when the user blurs the input again. Give them a chance to fill in the input while it's still focused.
Make sense? Any ideas?
Thanks!
Matt
Perhaps this works:
ng-model-options="{ updateOn: 'blur' }"
Add it to your input element. I believe the validation will occur when the model is updated, this way the model gets updated on blur.
Here you can see more options for this directive: https://docs.angularjs.org/guide/forms in Custom model update triggers. And a more detailed explanations in ngModelOptions.
Let me know if it works :)
Use function on ng-blur to validate and show messages if invalid.
ng-blur="validate()"
In your controller -
$scope.validate = function(){
//Validate logic
//If invalid
//Show message logic here
}
Take a look at the ngMessages documentation:
https://docs.angularjs.org/api/ngMessages/directive/ngMessages
You have an example there that shows you how to use it:
<form name="myForm">
<label>
Enter your name:
<input type="text"
name="myName"
ng-model="name"
ng-minlength="5"
ng-maxlength="20"
required />
</label>
<pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre>
<div ng-messages="myForm.myName.$error" style="color:maroon" role="alert">
<div ng-message="required">You did not enter a field</div>
<div ng-message="minlength">Your field is too short</div>
<div ng-message="maxlength">Your field is too long</div>
</div>
</form>
I think this is the best way to do it (at least it's how I do it).
I store time as an integer of minutes in the database/model. However, I want to display it to the user in decimal hours (and let them edit the value using a number of buttons).
At the moment I have this:
<p class="input-group">
<input type="text" readonly="readonly" value="{{vm.time.minutes|hoursMinutes}}" class="form-control" />
<span class="input-group-btn">
<ix-time-picker minutes="vm.time.minutes"></ix-time-picker>
</span>
</p>
Of the 2 elements in the p tag:
The input type="text" works fine as the display mechanism. The hoursMinutes filter returns a formatted value, e.g. for 90 mins it will return '1 hour 30 mins'.
The ix-time-picker directive pops up a modal window with buttons such as 15 mins, 30 mins, 45 mins, 1 hour, 1:15 hours, etc.
This works fine - except for validation. I'm using ng-messages and I can't work out how to display the validation for the required state:
<li class="help-block has-error"
ng-if="mainForm.$submitted"
ng-messages="mainForm.minutes.$error">
<span ng-message="required">
Minutes is required.
</span>
</li>
I don't have a control on the form called minutes (at least with an ng-model) so it won't display the message. I could add a hidden input with ng-model="vm.times.minutes" but as I need to use this repeatedly through the application, I'd prefer not to do that. Or at least I'd like to build some kind of common directive that merges the ability to have an ng-model on a control with the ability to display a value that is different to the model value, if that's possible.
Any suggestions?
Aha - one option is to make the input a label:
<p class="input-group">
<label id="minutes" name="minutes" readonly="readonly" class="form-control">{{vm.time.minutes|hoursMinutes}}</label>
<span class="input-group-btn">
<ix-time-picker minutes="vm.time.minutes"></ix-time-picker>
</span>
</p>
Then it displays correctly and it validates.
How can I mimic the tags box behaviour from SO in AngularJS? I'm trying to do something kind of similar where the user enters a set of space/comma-delimited words and as each one is typed I want to parse it out and put it into an array. I know there are probably 30 different ways to do this with bespoke javascript but I'm looking to leverage AngularJS in the most efficient way possible here.
At the moment I have an ng-model based on the input field and I'm doing an ng-repeat to create spans containing each tag, but angular uses commas as the delimiter and it also includes partially-formed words. So I only want to include words that have been delimited by the space/comma and I want to put them into an array so I can perform some validation on each one as it's entered, see below.
<form role="form" class="form-inline" data-ng-submit="updateScore()">
<input data-ng-list data-ng-model="labels" placeholder="Enter labels" class="form-control" type="text" >
</form>
<span data-ng-repeat="label in labels track by $index">
<span class="badge">
{{ label }} 5 <span class="glyphicon glyphicon-remove-sign"></span>
</span>
</span>
Any ideas?
Figured it out actually...
<input data-ng-list="/[,\s]/" data-ng-model="labels" placeholder="Enter labels" class="form-control" type="text" >