I have the following form:
<form name="newCollectionForm" ng-submit="onSubmit()">
<md-input-container class="md-block">
<label>Name</label>
<input name="collection"
ng-model="new_collection_model"
ng-trim="true"
ng-minlength="3"
ng-maxlength="50"
md-maxlength="50"
required>
<div ng-messages="newCollectionForm.collection.$error">
<div ng-message="required">You must supply a name for the Collection.</div>
<div ng-message="maxlength">The name must no contain more than 50 characters.</div>
<div ng-message="minlength">The name must be at least 3 characters.</div>
</div>
</md-input-container>
</form>
The only Issue is that it does not show the errors messages. It only show the error state but without showing the corresponding message.
I have tried many variants and no success.
Any help?
I have created a plunker for you.
https://plnkr.co/edit/MvFaXjseWt8ILRpsbftq?p=preview
you will have to do the following thing to make your code to work.
1: inject ngMessages in your module.
var app = angular.module('app', ['ngMessages']);
2: include this js file in your code.
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular-messages.min.js"></script>
Hope this will help you.
Well, at least I could show the messages making some changes:
<form name="newCollectionForm" ng-submit="onSubmit()" novalidate>
<md-input-container class="md-block">
<label>Name</label>
<input name="collection"
ng-model="new_collection_model"
ng-trim="true"
ng-minlength="3"
ng-maxlength="50" md-maxlength="50" required>
<div ng-show="newCollectionForm.collection.$error" role="alert">
<div class="form_error" ng-show="newCollectionForm.collection.$error.required">You must supply a name for the Collection.</div>
<div class="form_error" ng-show="newCollectionForm.collection.$error.maxlength">The name must no contain more than 50 characters.</div>
<div class="form_error" ng-show="newCollectionForm.collection.$error.minlength">The name must be at least 3 characters.</div>
</div>
</md-input-container>
</form>
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.
Refer this codepen link
I have a simple form built using angular material. have referred angular material demo for this.
The fields are marked required and if the input is not made then a field required message is displayed. But the message doesn't vanish once a valid entry is made. Whereas, in the official demo this works.
This is the HTML code pertaining to the form:
<form name="myform">
<md-input-container flex="50">
<label>Name</label>
<input required name="name" ng-model="project.name">
<div ng-messages="myform.name.$error">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
<md-input-container class="md-block">
<label>Email</label>
<input required type="email" name="email" ng-model="project.email"
minlength="10" maxlength="100" ng-pattern="/^.+#.+\..+$/" />
<div ng-messages="myform.email.$error" role="alert">
<div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']">
Your email must be between 10 and 100 characters long and look like an e-mail address.
</div>
</div>
</md-input-container>
<md-button class="md-raised md-primary">Submit</md-button>
</form>
What could be the problem here?
You forgot to inject ngMessages to your app.
angular.module('BlankApp', ['ngMaterial', 'ngMessages']);
I am using angular version 1.5.5 and recently upgraded to angular material 1.1.0. After upgrading I started facing few issues in ng messages. Initially ng messages was not displaying. I fixed it by adding below class by referring to git issue
md-input-container .md-input-message-animation:not(.ng-animate) {
opacity: 1;
margin-top: 0px;
}
Now same ng message is displaying multiple times.
<div class="inputbox-area" ng-form='subForm'>
<md-input-container class="md-block" ng-repeat="item in dg.inputArr">
<label>Level {{$index+1}}</label>
<input md-maxlength="32" maxlength="32" ng-change="dg.showErrors = false" name="{{item.Level}}" required ng-model="item.Name" ng-pattern="/^[-a-zA-Z0-9,._' ]*$/" type="text">
<div ng-messages="subForm[$index+1].$error" ng-if="dg.showErrors">
<div ng-message="required">Level {{$index+1}} is mandatory</div>
<div ng-message="md-maxlength">should be less than 32 characters long.</div>
<div ng-message="duplicate">Level {{$index+1}} is a duplicate name</div>
<div ng-message="pattern" class="my-message">Level {{$index+1}} is an invalid name</div>
</div>
</md-input-container>
</div>
Any suggestions where I am going wrong?
<div class="inputbox-area" ng-form='subForm'>
<md-input-container class="md-block" ng-repeat="item in dg.inputArr">
<label>Level {{$index+1}}</label>
<input md-maxlength="32" maxlength="32" ng-model-options="{ updateOn: 'submit' }" ng-change="dg.showErrors = false" name="{{item.Level}}" required ng-model="item.Name" ng-pattern="/^[-a-zA-Z0-9,._' ]*$/" type="text">
<div ng-messages="subForm[$index+1].$error" ng-if="dg.showErrors">
<div ng-message="required">Level {{$index+1}} is mandatory</div>
<div ng-message="md-maxlength">should be less than 32 characters long.</div>
<div ng-message="duplicate">Level {{$index+1}} is a duplicate name</div>
<div ng-message="pattern" class="my-message">Level {{$index+1}} is an invalid name</div>
</div>
</md-input-container>
</div>
The problem is your model getting updated each time an event fires so add ng-model-options="{ updateOn: 'submit' }" in your input box this will fire only when you submit that form
Im not 100% sure, but i think ng-messages should refer to the name of the input field like this:
ng-messages="subForm.{{item.Level}}.$error"
I dont know if this sintax is gonna work, but try it out and see if it does.
I have tried every flex of every kind, layout-wrap, everything angular material I can think of.
I can't figure out how to make these inputs spaced out evenly.
I think the problem is
that every input is inside of an md-input-container and I can't put a md-datepicker inside of one because then it gives the user two lines for an input.
If someone could let me know how to space these out evenly it really would be awesome!
<form name="formData" action="http://localhost:3000/senddata" method="POST">
<md-input-container class="md-block" >
<label><i class="material-icons">face</i> Name</label>
<input type="text" name="name" ng-model="$ctrl.name"/>
</md-input-container>
<md-input-container class="md-block">
<label><i class="material-icons">explore</i> Zip Code</label>
<input required type="text" name="zipCode" ng-model="$ctrl.zipCode" ng-minlength="5" pattern="^\d{5}(?:[-\s]\d{4})?$"/>
<div ng-messages="formData.zipCode.$error" style="color:red;" role="alert">
<div ng-message="required">This field is required!</div>
<div ng-message="minlength">Minimum length is 5</div>
</div>
</md-input-container>
<md-datepicker ng-model="$ctrl.myDate" class="md-block md-datepicker-focused" md-placeholder="Enter date" required md-max-date="$ctrl.maxDate"></md-datepicker>
<md-input-container class="md-block">
<label><i class="material-icons">search</i> Search:</label>
<input type="text" name="search" ng-model="$ctrl.search" required/>
<div ng-messages="formData.search.$error" style="color:red" role="alert">
<div ng-message="required">This field is required!</div>
</div>
</md-input-container>
<md-button class="md-raised md-primary" ng-disabled="formData.$invalid" ng-click="$ctrl.getData()" style="float:right;">Submit
</md-button>
I know this is nearly two months old but wanted to let you know that this should be fixed in Angular Material 1.1.0, which was officially released 2016-08-14.
Datepicker didn't used to work well with md-input-container. If you're curious, you can also read the commit with the fix.
All,
I am working on an AngularJS form and am trying to see how the ng-messages directive works with ng-messages-multiple. I can't seem to get it to pick up multiple errors. I expect to see both the required and minimum errors at the same time but for some reason I only see required, then minimum. I posted the HTML below. I have the ng-messages included using bower, the script call in my index.html page, and I am injecting into my app.js module as required.
I am using AngularJS v1.3.2 in this project.
<div class="panel panel-default">
<div class="panel-heading">
<h1>Validation Test Form</h1>
</div>
<div class="panel-body">
<form class="form" name="form" role="form" ng-submit="submit(form)">
<div class="row">
<div class="form-group" show-errors>
<label for="name">Name:</label>
<input
class="form-control"
type="text"
name="name"
ng-model="formModel.name"
minlength="5"
required/>
<div ng-messages="form.name.$error" ng-messages-multiple class="has-error">
<div ng-message="required">Required!</div>
<div ng-message="minlength">Minimum length is 5</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<button class="btn btn-success" type="submit">Save</button>
</div>
</div>
</form>
</div>
<div class="panel-footer">
{{formError}}
</div>
</div>
Try to use ng-minlength instead minlength
<input
class="form-control"
type="text"
name="name"
ng-model="formModel.name"
ng-minlength="5"
required/>
instead
<input
class="form-control"
type="text"
name="name"
ng-model="formModel.name"
minlength="5"
required/>
EDIT
It is normal behaviour for ng-minlength directive, this directive validate only when we have not 0 size of input, entered a value it must be at least 5 characters long, but it's ok to leave the field empty, and, unfortunately, in anyway you don't achieve, that you want. I offer you to create your custom directive or see in direction ng-pattern directive with need behaviour, if you very want that showing two message.