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>
Related
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
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.
How can my ngMessages access information about the form error? Such as field name and other properties?
Example:
I've seen many examples that look like this:
<input type="text" ng-model="field" name="myField" minlength="5">
<div ng-messages="myForm.myField.$error">
<div ng-message="minlength">The value entered is too short</div>
</div>
This is not a good error message because it doesn't tell the user how long the input should be. It just tells them it's too short.
It should render something like: "This field must be at least {{ minlength }} characters."
Even better: "{{ field }} must be at least {{ minlength }} characters."
Having to define a different message for inputs of different minlengths is extremely not-DRY.
How can this be done with ngMessages?
You could keep the minlength value on the scope and then bind to it in the validation message.
<input type="text" ng-model="field" name="myField" minlength="::myFieldMinlength">
<div ng-messages="myForm.myField.$error">
<div ng-message="minlength">This field must be at least {{::myFieldMinlength}} characters.</div>
</div>
I would do it the same as jayChase suggested. It's definitely easiest way and as he has suggested using single binding won't be bad performance wise
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" >
I am trying to get number of rows from the text that gets inject into text area, for some reason I can't get textarea to initalize number of row, here's my code. What am I doing wrong?
<div class="form-group col-sm-12">
<textarea contenteditable="true"
rows="'iwofRecord.WhatHasBeenDone.split('\n').lenght'"
class="form-control form-control-plain"
ng-model="iwofRecord.WhatHasBeenDone"
placeholder="What Has Been Done">
</textarea>
</div>
rows is not an Angular attribute, wrap that in {{}} - you're also double quoting that attribute (and have length spelled wrong)
rows="{{iwofRecord.WhatHasBeenDone.split('\n').length}}"
.lengHT - there is a typo, it has to be .length