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>
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 a big problem in my form when I try to reset it everything is reset except the ng messages. I tried everything but nothing worked. I don't know why
Here is my form:
<md-content layout-padding>
<form name="projectForm">
<div layout="row">
<md-input-container flex="50">
<label>Name</label>
<input required name="clientName" ng-model="project.clientName" ng-focus="">
</md-input-container>
<md-input-container flex="50">
<label>Email</label>
<input required type="email" name="clientEmail" ng-model="newEmployee.email"
minlength="10" maxlength="100" ng-pattern="/^.+#.+\..+$/" />
<div ng-messages="projectForm.clientEmail.$error" role="alert" ng-show="message">
<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>
</div>
<div layout="row">
<md-input-container flex="50">
<label>Mobile</label>
<input required name="clientName" ng-model="newEmployee.mobile">
<div ng-messages="projectForm.clientName.$error" ng-show="message">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
<md-input-container flex="50">
<label>Address</label>
<input required name="clientName" ng-model="newEmployee.address">
<div ng-messages="projectForm.clientName.$error" ng-show="message">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
</div>
<md-input-container class="md-block">
<label>Description</label>
<input md-maxlength="30" required md-no-asterisk name="description" ng-model="newEmployee.description">
<div ng-messages="projectForm.description.$error">
<div ng-message="required">This is required.</div>
<div ng-message="md-maxlength">The description must be less than 30 characters long.</div>
</div>
</md-input-container>
<div>
<md-button type="submit" class="md-raised md-primary">Submit</md-button>
<md-button ng-click="cancel()">Cancel</md-button>
</div>
</form>
</md-content>
and here is my reset function in the controller
$scope.reset = function() {
$scope.projectForm.$setPristine();
$scope.projectForm.$setValidity();
$scope.projectForm.$setUntouched();
}
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 have this simple working form, but when I put this in a $mdDialog it doesn't disable the submit button anymore... it basically ignores the networktypeForm.$invalid Is this common or is there a fix for this?
<form name="networktypeForm" ng-submit="add()" novalidate role="form">
<div class="md-dialog-content">
<md-input-container md-no-float flex>
<label>Element type</label>
<input flex ng-model="type" name="networktype" type="text" required="">
<div ng-messages="networktypeForm.networktype.$error">
<div ng-message="required">This is required</div>
</div>
</md-input-container>
</div>
<md-dialog-actions layout="row">
<md-button type="submit" class="md-primary md-raised" ng-disabled="networktypeForm.$invalid">
Add
</md-button>
</md-dialog-actions>
</form>
your requireds should be like this required not required="" or required="required"
For those still looking at this, I had a similar issue and mine was solved by removing the "novalidate" attribute.
Is it possible to make use of the angularJS validation tools without wrapping the controls in a form, and what would this be called?
Normal angularjs form validation example:
<form name="form" class="form-validation">
<p class="text-muted">Please fill the information to continue</p>
<div class="form-group">
<label>Username <em class="text-muted">(allow 'a-zA-Z0-9', 4-10 length)</em></label>
<input type="text" class="form-control" ng-model="user.name" ng-pattern="/^[a-zA-Z0-9]{4,10}$/" required >
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" ng-model="user.email" required >
</div>
<button type="submit" class="btn btn-success" ng-disabled="form.$invalid">Submit</button>
</form>