I am trying to validate a form using AngularJS. This is my form:
<form ng-controller="LoginCtrl" role="form" class="form-horizontal">
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input required type="email" name="email" ng-model="email" class="form-control" ng-class="{ error: email.$invalid }" id="email">
</div>
</div>
</form>
The ng-class is never applied. I tried email.$valid, email.$invalid and email.$error. The controller doesn't do anything except for logging to the console, so I know it is called. When I do set $scope.email = 'asd#asd.com' hardcoded it is set correctly though.
Why isn't my ng-class applied when I enter no value or an invalid string?
You must qualify with the form name as well:
<form ng-controller="LoginCtrl" name="emailForm" role="form" class="form-horizontal">
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input required type="email" name="email" ng-model="email" class="form-control" ng-class="{ error: emailForm.email.$invalid }" id="email">
</div>
</div>
</form>
Angular has its own directive for <form> and therefore understands that if it sees a form, it should add an object to the current scope that is named the same. In this case emailForm. So, in the controller you would address the email field as $scope.emailForm.email.
Since, you are specifically looking for required you could also use this:
ng-class="{ error: emailForm.email.$error.required }"
Related
I am using django registration-redux for user registration.
When i enter a same userid it shows error and the clears all the input fields of the form. how to prevent that error should occurs but input fields shouldn't get cleared.
<form method="POST" role="form" class="form-horizontal">
{% csrf_token %}
<div class="form-group">
<label class="col-sm-2 lab" for="id_username">Username *</label>
<div class="col-sm-10">
<input name="username" id='id_username' class='form-control' placeholder='Username' minlength="5" maxlength="15" type='text' required></div>
</div>
<div class="form-group">
<label class="col-sm-2 lab" for="id_email">E-Mail *</label>
<div class="col-sm-10" >
<input class='form-control' name="email" id='id_email' placeholder='user#mydomain.com' pattern="(^[a-zA-Z0-9_.+-]+#[a-zA-Z]+\.com$)|(^[a-zA-Z0-9_.+-]+#[a-zA-Z]+\.org$)|(^[a-zA-Z0-9_.+-]+#[a-zA-Z]+\.co\.in$)" maxlength="200" type='email' required>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 lab">Password *</label>
<div class="col-sm-10">
<input class="form-control" name="password1" id="id_password1" placeholder="Password" minlength="8" maxlength="15" type="password" required>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 lab2">Password Confirmation *</label>
<div class="col-sm-10">
<input class="form-control" name="password2" id="id_password2" placeholder="Confirm Password" minlength="8" maxlength="15" type="password" required>
</div>
</div>
<button type="submit" value= "register">Register</button>
</form>
should i use java script or what should help me?
Ideally your form should retain the entries. From what I can infer, it seems that you might not in your template you are not making use of form passed by the view.
Here is an example on how you can update the template:
<form action="/action/" method="POST">
{% csrf_token %}
<div class="form">
<br />
{{ form.username}}
<br />
<input type="submit" name="submit">
</div>
</form>
Now in your action view you can easily pass the variables in your form. Something like :
def action(request):
if request.method == "POST":
form = CustomForm(request.POST)
if form.is_valid():
form.save()
else:
print("form.errors:", form.errors)
else:
form = CustomForm()
ResponseDict = {"username": username}
return render_to_response("UserName.html", ResponseDict,
context_instance = RequestContext(request))
For more reference - Displaying form using template
The main essence is in you going to your view and then making the necessary calls. Please do note that wherever you are rendering the html you are also passing the form values.
Hope this helps.
loginForm.$valid is always return true, even when required fields are not filled out. I was unable to find a similar problem anywhere.
<form name="loginForm"
class="form-login"
ng-submit="loginForm.$valid && loginCtrl.login(navCtrl)"
novalidate>
<div class="form-group">
<label for="email">Username:</label>
<input type="email" class="form-control" id="username" placeholder="Enter username" required>
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" required>
</div>
<div class="form-group text-right">
Forgot password?
</div>
<div>Login form is {{loginForm.$valid}}</div>
<button type="submit" class="btn btn-default">Login</button>
</form>
Any help is appreciated.
Form validation and related flags will be set only if you have ng-model controllers assigned to the respective controls. So assign ng-model directive to them. Also instead of using id, you could use name. It will then be used as alias (property names) for the respective ng-model controller assigned on the formController instance (ex: loginForm.username.$valid ).
<div class="form-group">
<label for="email">Username:</label>
<input type="email" class="form-control"
ng-model="ctrl.userName"
name="username" placeholder="Enter username" required>
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control"
ng-model="ctrl.password"
name="pwd" placeholder="Enter password" required>
</div>
I had this problem too. The answer was required syntax wasn't there.
So it was always valid to submit the form.
Remember.
if you are on angular 5 material design and using [ngModelOptions]="{standalone: true}" in input field make it false ==> [ngModelOptions]="{standalone: false}"
This doesn't look any different than what I thought I would normally write when I put a form together in AngularJS, but for whatever reason ngSubmit is not working, and ngDisabled isn't disabling the button when the fields are empty. I took the section and pasted it into a new project to see if it was just acting out due to some other dependencies, but it still doesn't work even after trimming the fat. Can anyone see what is wrong, it's obvious after this amount of time I'm not going to see it myself.
I preloaded the form fields using the controller to verify that they are talking, interpolated the user data in pre tags which are bound to ng-model since I can see it update as I type, and there are no ng errors occuring, even looking at Chromes angular plugin it looks fine. But, login() is never invoked on ngSubmit and the button is never ngDisabled when the required fields are blank.
Stripped down version of the issue that still doesn't work:
<div ng-app="myApp">
<div ng-controller="LoginController as loginCtrl">
<form name="loginForm" role="form" ng-submit="loginCtrl.login()" novalidate></form>
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" name="username" ng-model="loginCtrl.user.username" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" name="password" ng-model="loginCtrl.user.password" required>
</div>
<div class="form-group clearfix">
<button type="submit" class="btn btn-primary btn-block" ng-disabled="loginForm.$invalid">Login</button>
</div>
<pre>user data = {{loginCtrl.user | json}}</pre>
<pre>form invalid = {{loginForm.$invalid}}</pre> <!-- always says false... but it is invalid -->
</form>
</div>
</div>
<script>
(function() {
'use strict';
angular.module('myApp', [])
.controller('LoginController', [function() {
var self = this;
self.user = { username: 'asdf', password: 'asdf' };
self.login = function() {
console.log("hello world");
};
}]);
})();
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
make sure that angular libraries are included.
https://docs.angularjs.org/misc/downloading
and have a look at these solutions
https://github.com/angular/angular.js/issues/2513
and if you like to see my working form...
<div class="col-md-10">
<form class="tab-pane active form-horizontal" id="first" name="userForm" novalidate ng-submit="save()">
<h2>Sign up</h2>
<div class="form-group" ng-class="{'has-error' : submitted && userForm.username.$invalid}">
<label class="control-label col-md-3">UserName <span class="required">* </span> </label>
<div class="col-md-4">
<input type="text" name="username" class="form-control" ng-model="user.username" required placeholder="username"/>
</div>
<p ng-show=" submitted && userForm.email.$invalid" class="help-block">Username is required.</p>
</div>
<div class="form-group" ng-class="{'has-error' : submitted && userForm.email.$invalid}">
<label class="control-label col-md-3">Email <span class="required">* </span> </label>
<div class="col-md-4">
<input type="email" name="email" class="form-control" ng-model="user.email" required placeholder="email"/>
</div>
<p ng-show=" submitted && userForm.email.$invalid" class="help-block">Email is required.</p>
</div>
<div class="form-group" ng-class="{'has-error' : submitted && userForm.password.$invalid}">
<label class="control-label col-md-3">Password <span class="required">* </span> </label>
<div class="col-md-4">
<input type="text" name="password" class="form-control" ng-model="user.password" required placeholder="1.2"/>
</div>
<p ng-show="submitted && userForm.password.$error.required" class="help-block">Password is required.</p>
</div>
<div class="form-group">
<label class="control-label col-md-3">Confirm Password </label>
<div class="col-md-4">
<input type="text" name="password_confirmation" class="form-control" ng-model="user.password_confirmation"
placeholder="password_confirmation"/>
</div>
<p ng-show="submitted && userForm.password_confirmation.$invalid" class="help-block">password_confirmation is required.</p>
</div>
<div class="form-group">
<div class="pull-left">
<a class="btn btn-default" href="/app/assets/images"> Back</a>
<button type="submit" class="btn btn-primary" ng-click="submitted=true">Submit</button>
</div>
</div>
</form>
</div>
How do I get the errors class/message to display using angular js and forms etc?
I tried this but it doesn't seem to validate at all:
<div class="form-group" ng-class="{'has-error': obj.title.$invalid}">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" ng-model="obj.title" required>
</div>
<div class="alert alert-danger" ng-show="obj.title.$invalid">
You are required to enter a name.
</div>
http://plnkr.co/edit/C6eU4pIS8FTfA59SCShh?p=preview
You have to wrap it inside a <form>, give the form a name and the input a name, then access the validity though formName.inputName
<form name="form">
<div class="form-group" ng-class="{'has-error': obj.title.$invalid}">
<label for="name">Name</label>
<input type="text" name="title" class="form-control" id="name" ng-model="obj.title" required>
</div>
<div class="alert alert-danger" ng-show="form.title.$invalid">
You are required to enter a name.
</div>
</form>
Be aware that <form> is an instance of FormController in angular. That's where we have angular validation.
DEMO
I have the following typical Twitter Bootstrap / AngularJS form piece.
<div class="form-group" ng-class="{ 'has-error': (loginForm.email.$invalid || !valid(loginForm.email, loginForm.password)) }">
<label for="email" class="col-sm-2 control-label">
Email
</label>
<div class="col-sm-10">
<input type="email" name="email" ng-model="email" class="form-control" id="email">
</div>
</div>
I'm writing a test for CasperJS and I would like to test that the has-error class is applied to the parent of the element with id email. Is this possible? If so, how?
casper.exists(".has-error #email");
or
test.assertExists(".has-error #email");
should work.