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']);
Related
<form name="inputdata" ng-submit="saveStudentInfo(student)">
<div layout="row">
<md-input-container flex="50"> <label>First
Name</label> <input required name="studentFName"
ng-model="student.studentFName">
<div ng-messages="inputdata.studentFName.$error">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
<md-input-container flex="50"> <label>Middle
Name</label> <input name="studentMName" ng-model="student.studentMName">
</md-input-container>
<md-input-container flex="50"> <label>Last
Name</label> <input required name="studentLName"
ng-model="student.studentLName">
<div ng-messages="inputdata.studentLName.$error">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
</div>
</form>
That is the form components.
$scope.inputdata.$setPristine();
If I write this code inside the controller, it shows
$scope.inputdata.$setPristine is not a function.
Any suggestions ?? What should i do ?
Angular version 1.6.1
This method sets the form's $pristine state to true, the $dirty state to false, removes the ng-dirty class and adds the ng-pristine class. Additionally, it sets the $submitted state to false.
So, it doesn't work for individual form element. Do it for form instead.
You can't use $setPristine on an input.
It should be used on a form.
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.
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>
How Can I validate a form using Angular-material, I need two functionalities:
1) When click submit show error messages if required fields are empty.
2) Do not send post request(avoid submit) if form fields are not valid.
The next code avoid submit but it does not show error messages when clicking, only when cursor is going out of each input field.
<form name="userForm">
<md-input-container>
<input name="email" placeholder="Email" data-ng-model="vm.registerUserData.email" required />
<div ng-messages="userForm.email.$error" ng-if='userForm.myControl.$dirty'>
<div ng-message="required">This is required!</div>
</div>
</md-input-container>
<md-input-container>
<input name="Password" placeholder="Password" data-ng-model="vm.registerUserData.password" required />
<div ng-messages="userForm.Password.$error">
<div ng-message="required">This is required!</div>
</div>
</md-input-container>
<md-input-container>
<md-button id="registerUser" value="Register" class="md-raised md-primary" ng-click="userForm.$valid && vm.registerUser()" aria-label="login" ng-disabled="login.loginForm.$invalid()">
Create
</md-button>
</md-input-container>
</form>
You're missing 2 things.
First: add type="submit" to your md-button element.
Second: add novalidate to your form element:
Note that novalidate is used to disable browser's native form validation.
You should also consider using ng-submit on the form element instead of using ng-click on the button.
<form name="userForm" novalidate ng-submit="userForm.$valid && vm.registerUser()">
<md-input-container>
<input name="email" placeholder="Email" data-ng-model="vm.registerUserData.email" required />
<div ng-messages="userForm.email.$error" ng-if='userForm.myControl.$dirty'>
<div ng-message="required">This is required!</div>
</div>
</md-input-container>
<md-input-container>
<input name="Password" placeholder="Password" data-ng-model="vm.registerUserData.password" required />
<div ng-messages="userForm.Password.$error">
<div ng-message="required">This is required!</div>
</div>
</md-input-container>
<md-input-container>
<md-button type="submit" id="registerUser" value="Register" class="md-raised md-primary" aria-label="login" ng-disabled="login.loginForm.$invalid()">
Create
</md-button>
</md-input-container>
</form>
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.