I'm having trouble getting a message to display when the field input is invalid. I can see the classes being correctly applied to the element i.e. ng-dirty ng-invalid ng-invalid-pattern so I just need to make the error message display. Is there an issue with my html?
Thanks!
<form ng-controller="FormCtrl" name="TestForm" action="http://myserver/api" method="post" novalidate>
<div class="form-group">
<input class="form-control" type="text" id="vld" name="vld" data-ng-pattern="/(^$)|(\b\d{9}\b)/" data-ng-model="model.tfn">
<span class="error" data-ng-show="model.tfn.$invalid">Correct input etc...</span>
</div>
</form>
The information you are looking for is part of the FormController. You need to setup a formController via ng-form directive:
<div class="form-group" ng-form="myForm">
<input class="form-control" type="text" id="vld" name="vld" data-ng-pattern="/(^$)|(\b\d{9}\b)/" data-mg-model="model.tfn">
<span class="error" data-ng-show="myForm.vld.$invalid">Correct input etc...</span>
</div>
If this is done you may access the information by [Name of the OFrmController].[Name of the input field].$invalid e.g. myForm.vld.$invalid
Related
i have to validate the text box which shows the error message when user enters 4 digit as 9999.so i have used the ng-pattern method to show error message but ng-pattern does n't allow to update the object.my code is given below:
<md-input-container class="" style="margin:5px 0px; margin-right:15px;">
<input type="password" name="numCode" ng-model="datas.part[1].Value" ng-value="datas.part[1].Value" maxlength="4" ng-pattern="/(?!9{4})\d{4}/" ng-keydown="vm.testCode(datas.part[1].Value)" class="ng-pristine ng-valid md-input ng-touched" aria-invalid="false" style="" autocomplete="off" required>
<div ng-messages="vm.formName.numCode.$error" class="allign-padding-bottom" role="alert">
<div ng-message-exp="['minlength','maxlength','pattern']">
{{::'testcode'|translate}}
</div>
</div>
</md-input-container>
vm.testCode= function (val) {
console.info("sdf",val);
vm.showConfirmUserCode = true;
///vm.isDeviceEnabled = false;
}
In ng-keydown method the model did n't update.it shows undefined in vm.formName.numCode.$viewvalue.kindly help me to sort out this problem & check my ng-pattern.if i remove my ng-pattern means i have the updated model
Please check this plunker:
http://plnkr.co/edit/g0wsbFnfi6TEW76orxIJ?p=preview
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<form name="form1" novalidate>
<input type="password" name="numCode" ng-model="inputText" ng-value="inputText" ng-pattern="/(?!9{4})\d{4}/" ng-maxlength="4" ng-keydown="testCode(inputText)" aria-invalid="false" style="" autocomplete="off" required>
<div ng-messages="form1.numCode.$error" role="alert">
<div ng-message="pattern">pattern error</div>
<div ng-message="maxlength">maxlength error</div>
<div ng-message="required">required error</div>
</div>
</form>
</body>
Have you referenced angular-messages as a seperate library? The ng-keydown works if its a valid text and the error messages are shown correctly.
I have a form with an error field. Code is as follows:
<form name="myform" ng-submit="submit">
<input name="text" ng-model="username" required>
<div ng-messages="myform.username.$error">
<div ng-message="required">Field is required</div>
<div ng-message="has_spaces">Field must not contain spaces</div>
</div>
</form>
Is my logic of how ngMessages work correct? I tried setting "has_spaces" after the form is submitted but nothing works.
Your snippet is correct, except you need to access the form element for which you want to get errors by its name attribute and not the value of ng-model. I.e., instead of accessing myform.username.$error, you should access myform.text.$error. This snippet should do the job:
<form name="myform" ng-submit="submit">
<input name="text" ng-model="username" required>
<div ng-messages="myform.text.$error">
<div ng-message="required">Field is required</div>
<div ng-message="has_spaces">Field must not contain spaces</div>
</div>
</form>
Using ng-message, ng-maxlength, ng-minlength or any kind of validation in angular it use the name attribute instead of ng-model. So in your code you must use ng-messages = "myform.text.$error".
The problem is
you're referencing the model rather than the name of the input field itself in ng-messages.
You didn't define an input type. make type="text"
Renamed the input name to username, however in the model itself you should store it to an object IMO
I've corrected it below, try this instead
<form name="myform" ng-submit="submit">
<input name="username" type="text" ng-model="user.name" required>
<div ng-messages="myform.username.$error">
<div ng-message="required">Field is required</div>
<div ng-message="has_spaces">Field must not contain spaces</div>
</div>
</form>
I have custom html5 error message for input, which changes validation error text in chrome.
<input
oninvalid="setCustomValidity('It's custom message!')"
onchange="try{setCustomValidity('')}catch(e){}">
How can I do this with Angular directive?
Updated
Let's say, I want type <input custom-validity> instead of this.
You can learn all about doing form validation the Angular way in their documentation.
You don't need to create your own directives, because angular already has great form validation support built in.
Below is an example how to use the $dirty and $invalid attributes to show or hide validation messages. 'dirty' means that the form has been modified by the user.
<div ng-app="app">
<form name="myForm" novalidate>
<p>
<label>Name
<input type="text" name="name" ng-model="name" required>
<span ng-show="myForm.name.$invalid && myForm.name.$dirty">
Name required
</span>
</label>
</p>
<p>
<label>Email
<input type="email" name="email" ng-model="email">
<span ng-show="myForm.email.$invalid && myForm.email.$dirty">
Put a valid email
</span>
</label>
</p>
<input type="submit" value="Submit" ng-disabled="myForm.$invalid">
</form>
</div>
You can also style the valid/invalid fields using a style rule like this:
form input.ng-invalid.ng-dirty { ... }
I am trying to follow the AngularJS example of doing inline validations of required fields. However when it comes to using a ng-repeat, it doesn't seem to work for me.
<form name="myForm" novalidate>
Me: <input required type="text" name="myName" ng-model="name" />
<span class="error" ng-show="myForm.myName.$error.required">Required!</span>
<div ng-repeat="friend in friends">
Friends: <input required type="text" name="myFriend[{{$index}}]" ng-model="friend.name" />
<span class="error" ng-show="myForm.myFriend[{{$index}}].$error.required">Required</span>
</div>
</form>
JSFiddle
Any idea what I am doing wrong or what I can do to fix it?
Unfortunately you cannot do it that way. The input element does not like having the name dynamically generated. You will need to use ng-form as a subform and wrap the repeated element. Here is a fork of your fiddle: http://jsfiddle.net/p26VQ/
<div ng-controller="MyCtrl">
<form name="myForm" novalidate>
Me: <input required type="text" name="myName" ng-model="name" /><span class="error" ng-show="myForm.myName.$error.required">
Required!</span>
<div ng-repeat="friend in friends">
<ng-form name="subform{{$index}}">
Friends: <input required type="text" name="myFriend" ng-model="friend.name" />
<span class="error" ng-show="subform{{$index}}.myFriend.$error.required">Required</span>
</ng-form>
</div>
</form>
</div>
Using at least AngularJS 1.4.3 you can use this:
name="formControl_{{uniqueId}}"
And this:
ng-messages="myForm[ 'formControl_' + uniqueId ].$error"
Taken from the comment at https://github.com/angular/angular.js/issues/1404#issuecomment-125805732 found in the issue referenced by Danny.
I’m trying to get user.name.length value at error message.
If jQuery is used, it is realizable, but isn't there any method unique to Angularjs?
<form novalidate name="myForm" ng-submit="addUser()">
<p>Name:
<input type="text" name="name" ng-model="user.name" required ng-minlength="5" ng-maxlength="8">
<span ng-show="myForm.name.$error.minlength">{{user.name.length}} too short!</span>
Can you try with {{myForm.name.$viewValue.length}}, like below:
<input type="text" name="name" ng-model="user.name" ng-minlength="5" ng-maxlength="8" />
<span ng-show="myForm.name.$error.minlength">{{myForm.name.$viewValue.length}} too short!</span>
<span ng-show="myForm.name.$error.maxlength">{{myForm.name.$viewValue.length}} too long!</span>
The way ng-minlength and ng-maxlength work, if the input textbox has fewer or more characters than specified by the two directives, then user.name is not populated (I don't even think it is defined). To see what I mean, add {{user.name}} after the <span>.