Missing step attribute error message in input - angularjs

Angular js does provide a validation for several html5 introduced attributes of an input, like min or requiredincluding the .
<input type="number" name="input1" id="input1" min="0"
ng-model="$ctrl.input1"ng-required />
<div ng-messages="formname.input1.$error" class="em-messages">
<div ng-message="required">This value is required</div>
<div ng-message="min">You must not use negative values</div>
</div>
For the step attribute such a validation is working, but no error message can be displayed the material way by default, so what's the easiest way to implement it (for example for step="0.001"?
<input type="number" name="input1" id="input1" min="0" step="0.001"
ng-model="$ctrl.input1"ng-required />
<div ng-messages="formname.input1.$error" class="em-messages">
<div ng-message="required">This value is required</div>
<div ng-message="min">You must not use negative values</div>
<div ng-message="step">You can work with 0.001 steps</div>
</div>

Simple, just use a regex like this:
<input type="number" name="input1" id="input1" min="0" step="any"
ng-model="$ctrl.input1"ng-required
ng-pattern="/^[0-9]\d*((.|,)\d{1,3})?$/" />
<div ng-messages="formname.input1.$error" class="em-messages">
<div ng-message="required">This value is required</div>
<div ng-message="min">You must not use negative values</div>
<div ng-message="pattern">You can work with 0.001 steps</div>
</div>
To eplain the regex quickly:
[1-9]\d* means that there can be any natural numbers
((.|,)\d{1,3})? now a . or a , can follow to seperate the fraction
\d{1,3} defines that there have to be one to three numbers have to follow
Now your pattern will show an error message in angular material style.
Depending on how your step should actually look like, you will have to modify either the \d{1,3}, to reflect the amount past commata numbers and maybe wrap into a modulo, so if you want todo something link step="0.005".

Related

Length of $error in ngMessages module of AngularJS

Here is the basic way to use ngMessages module. myForm.myName.$error return list of error. I want to get number of errors. I have tried {{myForm.myName.$error | json}}.length and myForm.myName.$error.length.
<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 ng-message-default>This field has an input error</div>
</div>
</form>
In case you missed it in the documentation for the ngMessages module.
By default, ngMessages will only display one message for a particular key/value collection at any time.
This means myForm.myName.$error can only ever have a maximum of one property.
If you want to support the display of multiple messages, apply the ng-messages-multiple attribute alongside the ng-messages directive. With this applied, you can retrieve the number of active errors by creating a helper function.
function getErrorCount() {
return Object.keys(myForm.myName.$error).length;
}
Here's a demonstration of the suggestion above.

Show error message if required no.of numbers are not given - Angularjs

Hi i'm new to angularjs development and i'm struggling with form validations.
I have a input field that allows maximum of 8 digits. I want to show a error message if 8 digits are NOT given. Also the error message should disapear when 8 digits are given.
How can i do this?
My field
<input maxlength="8" ng-model="customer.customerId" class="form-control" id="id_customer_select_id" placeholder="Enter existing customer id" ng-change="selectCustomer()" name="customer_id" ng-value="customerId" required="required" >
Thanks in advance.
It would a better option to use <form> </form> for the validation
also use ng-messages to display your validation error message
Given below is the example how to use validation for your question:
Demo Example
<input type="text" placeholder="Number" name="number" ng-model="mobile" ng-maxlength="8" required />
<div ng-messages="formName.number.$error" item- style="color: red">
<div ng-message="required">Max number entered!! </div>
</div>
try this
<div ng-show="formName.elementName.$invalid && formName.elementName.$dirty">
<span ng-show="formName.elementName.$error.required">
<div style="font: normal 20px courier">This field should be 8 numbers long</div>
</span>
</div>

How to get the element inputName through ng-messages directive?

how do I trigger the error messages without knowing the input name? See the code below:
<input class="form-control"
id="{{field.field_id}}"
set-name="{{field.field_id}}"
type="text"
ng-model="field.field_value"
ng-minlength="field.field_char_num_min"
ng-maxlength="field.field_char_num_max"/>
<div ng-messages="don't know the input name yet" class="my-messages">
<div ng-message="minlength">Your field is too short</div>
<div ng-message="maxlength">Your field is too long</div>
</div>
In ng-messages should be written the path to errors from the input, like myForm.inputName.$error. But the Inputs will be generated and appended automatically so I can't write the name because a generator sets the names. I have to get a hold of the input name. How can I do it?
Try something like this in in ng-message
<form name="formName">
<input type="text" id="anyName" name="anyName" required/>
<span ng-show="formName.anyName.$error.required"> Please enter a value.</span>
</form>
You could use field[field.field_id]['$invalid'] to determine whether field is valid or not, and then by using field[field.field_id]['$error'] show minlength & maxlength error
Markup
<div ng-show="field[field.field_id]['$invalid']" class="my-messages">
<div ng-message="field[field.field_id]['$error'].minlength">Your field is too short</div>
<div ng-message="field[field.field_id]['$error'].maxlength">Your field is too long</div>
</div>

Validating nested form in angular

Having this ordinary (name attribute is requred by server) form with angular and can't figured out how to make validations work. What should i put into ng-show="TODO"
http://jsfiddle.net/Xk3VB/7/
<div ng-app>
<form ng-init="variants = [{duration:10, price:100}, {duration:30, price:200}]">
<div ng-repeat="variant in variants" ng-form="variant_form">
<div>
<label>Duration:</label>
<input name="variants[{{$index}}][duration]" ng-model="variant.duration" required />
<span ng-show="TODO">Duration required</span>
</div>
<div>
<label>Price:</label>
<input name="variants[{{$index}}][price]" ng-model="variant.price" />
<span ng-show="TODO">Price required</span>
</div>
</div>
</form>
</div>
ps: this is just piece of form, which is more complicated
Thanks
AngularJS relies on input names to expose validation errors.
Unfortunately, as of today it is not possible (without using a custom directive) to dynamically generate a name of an input. Indeed, checking input docs we can see that the name attribute accepts a string only.
Long story short you should rely on ng-form to validate dynamically created inputs. Something like :
<div ng-repeat="variant in variants" >
<ng-form name="innerForm">
<div>
<label>Duration:</label>
<input name="duration" ng-model="variant.duration" required />
<span ng-show="innerForm.duration.$error.required">Duration required</span>
</div>
<div>
<label>Price:</label>
<input name="price" ng-model="variant.price" required/>
<span ng-show="innerForm.price.$error.required">Price required</span>
</div>
</ng-form>
Working fiddle here
UPDATE : Base on your serverside requirement why not do something like that :
<input type="hidden" name="variants[{{$index}}][duration]" ng-model="variant.duration"/>
<input name="duration" ng-model="variant.duration" required />
The hidden input will be the one read by the server while the other one will be used to do the client side validation (later discarded by server). It s kind of an hack but should work.
PS : Be sure that your form is valid before actually submitting it. Can be done with ng-submit

angularjs ng-minlength validation is not working, form still being submitted

I am trying to submit the form on only successful validation.
validation is working for required but not working for ng-minlength
form input is invalid but form is still being submitted.
<form name="myForm" ng-submit="count = count + 1" ng-init="count=0" ng-app>
<div class="control-group" ng-class="{error: myForm.mobile.$invalid}">
<label class="control-label" for="mobile">Mobile</label>
<div class="controls">
<input type="text" name="mobile" placeholder="07XXXXXXXXX" ng-model="mobile" ng-minlength="11" required />
<span ng-show="myForm.mobile.$error.required" class="help-inline">Required</span>
<span ng-show="myForm.mobile.$error.minlength" class="help-inline">Mobile number should be minimum 11 character starting from 07</span>
</div>
</div>
<div class="control-group">
<div class="controls">
<input class="btn" type="submit" value ="submit" />
</div>
count: {{count}}<br />
<tt>myForm.$invalid = {{myForm.$invalid}}</tt><br/>
</div>
</form>
http://jsfiddle.net/pMMke/9/
what am I doing wrong.
I don't want to use submit button disable method.
This is what you are doing wrong: you are mixing two concepts, Angular validators and
HTML5 validators.
The required HTML5 validators, for instance, states that:
When present, it specifies that an input field must be filled out before submitting the form.
So, if you try to submit a form that has an input with this attribute, it will show a message explaining this to the user, and it will prevent the form from being sent. This is the behavior you want. Why isn't working for ng-minlength? Because ng-minlength is an Angular validator (you can tell because it begins with ng-), and it doesn't add any special behavior to the form. It simply set the input where it is located to invalid (and hence, the form), and let you decide what to do with it.
You have an option: you can use the pattern HTML5 validator, to specify the field requires at least 11 characters. It would like this:
<input type="text" pattern=".{11,}">
So when you submit a form containing this input, it will no be sent if the user has enter less than 11 characters.
But since we are it, and you are already using the pattern validator, you could use the regular expression in its full potential, and define something like:
<input type="text" pattern="07[0-9]{9}" />
Which will only admit values of 11 characters, that start by "07" and that contains only digits. I have modified your fiddle to show you how it would work: http://jsfiddle.net/helara/w35SQ/
I mistakenly used ngMaxlength="12" ngMinlength="6" instead of ng-minlength="6" ng-maxlength="12", it's working fine now.
Both ng-minlength & mg-maxlength works in AngularJS.
I've tested this in AngularJS version 1.3.
Make sure to use novalidate with <form> to disable browser's native validation.
This should work:
To enter mobile number
ng-show="myForm.mobile.$touched && myForm.mobile.$error.required"
For minimum length
ng-show="myForm.mobile.$touched && myForm.mobile.$error.minlength"
For maximum length
ng-show="myForm.mobile.$touched && myForm.mobile.$error.maxlength"
This work for me guys
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input ng-minlength="11" class="mdl-textfield__input" type="text" name="cpf" id="cpf" ng-model="avaliacao.cpf" ng-required="true" ng-pattern="/^\d+$/">
<label class="mdl-textfield__label" for="cpf">CPF *</label>
</div>
<p style="color: #d50000;" ng-show="myForm.cpf.$error.required && myForm.cpf.$dirty">Field Required</p>
<p style="color: #d50000;" ng-show="myForm.cpf.$error.pattern">Only numbers</p>
<p style="color: #d50000;" ng-show="myForm.cpf.$error.minlength">Min 11 Chars</p>
I'm facing the same issue, and I think you can only disable the button or ignore the entered value by yourself. You can also check the $valid property in your controller and ignore the value... It is not so nice, but I found no other way.

Resources