I have login form,
i cleared the form after form submitssion,and set form as Pristine mode.
but error message is still remain.
Here is my code,
<form name="loginForm" ng-submit="loginForm.$valid && login(user)" novalidate style="position: relative">
<div class="log-input-frm mdl-textfield mdl-js-textfield mdl-textfield--floating-label textfield-demo">
<div class="col-sm-12 f_name">
<input ng-model="user.username" name="username" type="email" placeholder="Email address" required="">
<div ng-show="loginForm.$submitted || loginForm.username.$touched" ng-model="loginForm.username">
<span ng-show="loginForm.username.$error.required" class="text-danger">Please enter email address.</span>
<span ng-show="loginForm.username.$error.email" class="text-danger">Please enter valid email address.</span>
</div>
</div>
</div>
<div class="log-input-frm mdl-textfield mdl-js-textfield mdl-textfield--floating-label textfield-demo">
<div class="col-sm-12 f_name">
<input ng-model="user.password" name="password" type="password" placeholder="Password" required="">
<div ng-show="loginForm.$submitted || loginForm.password.$touched" ng-model="loginForm.password">
<span ng-show="loginForm.password.$error.required" class="text-danger">Please enter password.</span>
</div>
</div>
</div>
<div class="buttons">
<span class="signup pull-left">
<a ui-sref="forgotpassword">Forgot password</a>
</span>
<div class="link">
<div class="link" style="padding-bottom:0;">
<md-button type="submit" class="md-raised primary" > Login </md-button>
</div>
</div>
</div>
</form>
controller code to reset form and set in pristine mode.
$scope.loginForm.$setPristine();
$scope.loginForm.$setUntouched();
$scope.user = {};
Where am i wrong???
I resolved my problem by using timeout function
$scope.user = {};
$timeout(function () {
$scope.loginForm.$setPristine();
$scope.loginForm.$setUntouched();
$scope.loginForm.$submitted = false;
});
Related
From the Login design page I have to move the cursor from the Username to the Password <input>, and the same procedure from Password to the <button> click event so that I can login to my page by pressing the keyboard enter key, in Angular 6.
My HTML code below:
<div class="ibox-content login-form">
<div class="form-group">
<input type="text" class="form-control" id="inputUername" placeholder="Username" [(ngModel)]="loginData.username" autofocus >
</div>
<div class="form-group">
<input type="password" class="form-control" id="inputPassword" placeholder="Password" [(ngModel)]="loginData.password" >
</div>
<button type="submit" icon="fa fa-sign-in" class="btn btn-primary" [disabled]="loginData.username == '' || loginData.password == ''"
(click)="login()">Login</button>
<div class="login-error-message" *ngIf="content.loginFailed">
<p>Invalid username or password</p>
</div>
</div>
Use (keyup.enter) = "focusablePassword.focus()" to input Username and call #focusablePassword to input Password, this would perform the task and same for button as shown in code below.
<div class="ibox-content login-form">
<div class="form-group">
<input type="text" class="form-control" id="inputUername" placeholder="Username" [(ngModel)]="loginData.username" autofocus (keyup.enter)="focusablePassword.focus()">
</div>
<div class="form-group">
<input #focusablePassword type="password" class="form-control" id="inputPassword" placeholder="Password" [(ngModel)]="loginData.password" (keyup.enter)="focusableSubmit.focus()" >
</div>
<button #focusableSubmit type="submit" icon="fa fa-sign-in" class="btn btn-primary" [disabled]="loginData.username == '' || loginData.password == ''"
(click)="login()">Login</button>
<div class="login-error-message" *ngIf="content.loginFailed">
<p>Invalid username or password</p>
</div>
</div>
I have a form with email, password, and password again. I want to hide the add sign by default, and only show it if my form is dirty and password matches password again.
I can’t seem to get it to work.
<div ng-controller="MyCtrl">
Hello, {{name}}!
<form name="addUserForm">
<div class="form-row row">
<div class="col-xs-3 col-sm-3">
<input ng-model="newLogin.email" ng-blur="checkEmailRestriction(newLogin.email)" required type="text" class="form-control input-sm" placeholder="Email">
</div>
<div class="col-xs-3 col-sm-3">
<input ng-model="newLogin.password" required stopccp type="password" class="form-control input-sm" ng-change="checkPwdRestriction(newLogin.password)" placeholder="Password">
</div>
<div class="col-xs-3 col-sm-3">
<input stopccp ng-model="newLogin.passwordAgain" ng-change="checkPwdMatch(newLogin.password,newLogin.passwordAgain)" type="password" class="form-control input-sm" placeholder="Password Again">
</div>
<div class="col-xs-3 col-sm-3">
<a ng-click="storeLogin()" ng-if="newLogin.password === newLogin.passwordAgain && addUserForm.$dirty == false" class="btn btn-xs email-action"> add </a>
</div>
</div>
</form>
<hr>
<p>
object = ? {{newLogin}}
</p>
<p>
$dirty = ? {{addUserForm.$dirty}}
</p>
<p>
$valid = ? {{addUserForm.$valid}}
</p>
</div>
I’ve tried
http://jsfiddle.net/bheng/5pzL8gc3/
I hided your button with this :
ng-show="newLogin.password && newLogin.password == newLogin.passwordAgain && addUserForm.$dirty == true"
And it appears when I provide an email and passwords that match.
Hello I am working with MEAN Stack application.When I add record data stored
Successfully. But When I don't fill any field and click add button which is
Calling function for store record My function working properly But I used the
Validation field is required but function working and redirect my given path.
new data is not storing but why function is working.
function in controller
$scope.adduser = function()
{
$http({
method:"POST",
url:'api/adduser',
data:{name:$scope.name, email:$scope.email,password:$scope.password}
}).then(function successCallback(response) {
if(response.data.error){
$scope.error = response.data.error;
}else{
$scope.Blog=response.data;
$localStorage.dd=$scope.Blog;
$location.path('/allusers');
}
//console.log(response);
}, function errorCallback(response) {
alert("data is not comming here");
});
}
message show field is required but not stay there go to the given path when
response success. how to resolved this problem
view file is
<!-- BEGIN PAGE HEADER-->
<h3 class="page-title">
Advanced Datatables <small>advanced datatable samples</small>
</h3>
<div class="page-bar">
<ul class="page-breadcrumb">
<li>
<i class="fa fa-home"></i>
Home
<i class="fa fa-angle-right"></i>
</li>
<li>
All Users
</li>
</ul>
</div>
<div class="row">
<div class="col-md-12">
<!-- BEGIN VALIDATION STATES-->
<div class="portlet box blue-hoki">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i>
New User
</div>
</div>
<div class="portlet-body form">
<form id = "expensesCreate" class="form-horizontal">
<div class="form-body">
<div class="alert alert-danger display-hide">
<button class="close" data-close="alert"></button>
You have some form errors. Please check below.
</div>
</div>
<div class="form-group">
<label for="price" class="col-sm-3">Name</label>
<div class="col-sm-4 #if($errors->has('price')) has-error #endif">
<input class="form-control input-sm" placeholder="" autocomplete="off" id="first_name" name="name" ng-model="name" type="text" value ="" required>
<p class="error"></p>
</div>
</div>
<div class="form-group">
<label for="price" class="col-sm-3">Email</label>
<div class="col-sm-4 #if($errors->has('price')) has-error #endif">
<input class="form-control input-sm" placeholder="" autocomplete="off" id="email" name="email" ng-model="email" type="text" value ="" required>
<p class="error"></p>
</div>
</div>
<div class="form-group">
<label for="Phone_no" class="col-sm-3">Password</label>
<div class="col-sm-4 #if($errors->has('Phone_no')) has-error #endif">
<input class="form-control input-sm" placeholder="" autocomplete="off" id="phone_no" name="company_name" ng-model="password" type="text" value ="" required>
<p class="error"></p>
</div>
</div>
<div class="form-actions">
<div class="row">
<div class="col-md-offset-3 col-md-9">
<button ng-click="adduser()" class="btn blue-hoki">Add</button>
<a ng-href="#/allusers">
<button type="button" class="btn default" id="cancel">Cancel</button>
</a>
</div>
</div>
</div>
</div>
</form>
<!-- END FORM-->
</div>
</div>
<!-- END VALIDATION STATES-->
</div>
</div>
<style>
.form-horizontal .form-group {
margin-right: -15px;
margin-left: 0px;
}
</style>
Add disabled attribute on your button validation while the form is invalid
<button ng-click="adduser()" class="btn blue-hoki" ng-disabled="expensesCreate.$invalid">Add</button>
**my angular function **
self.login = function () {
loginService.login(self.user).success(function (response) {
sessionService.set("token", response.response.token);
$window.location.href = "/camera";
}).error(function (response) {
flashService.showError(response.message);
});
}
my html code
<form name="myForm" class="row" ng-submit = loginCtrl.login() novalidate>
<label>Username or email</label>
<div class='form-group' ng-class="{ 'has-error' : myForm.userName.$invalid && !myForm.userName.$pristine }">
<input type="text" name="userName" class="input-block-level form-control" placeholder="Your username or email" ng-model = "loginCtrl.user.email" required/>
<p ng-show="myForm.userName.$invalid && !myForm.userName.$pristine" class="help-block">Please enter the username or email.</p>
</div>
<label >Password <a class="password" href="javascript:void(0)" data-toggle="modal" ng-click="loginCtrl.openForgetPasswordModal('md')" >forgot it?</a></label>
<div class='form-group' ng-class="{ 'has-error' : myForm.password.$invalid && !myForm.password.$pristine }">
<input type="password" name= "password" class="input-block-level form-control margin-none" placeholder="Your password" ng-model = "loginCtrl.user.password" required/>
<p ng-show="myForm.password.$invalid && !myForm.password.$pristine" class="help-block">Please fill up the password.</p>
</div>
<div class="separator bottom"></div>
<div class="col-md-8 padding-none ">
<div class="uniformjs"><label class="checkbox theme-color"><input type="checkbox" value="remember-me" ng-model = "loginCtrl.remember" ng-click="loginCtrl.rememberMe()"remember-me>Remember me</label>
</div>
</div>
<div class="col-md-4 pull-right padding-none">
<button class="btn btn-block btn-primary" type="submit">Sign In</button>
</div>
</form>
I want when i click on login button then it will be redirect on seprate page.but window location is not working here.
use this:
$location.path('/camera');
I have this form with validation in AngularJS:
<form ng-app="myApp" ng-controller="validateCtrl as validate" name="myForm" action="sendEmail" novalidate>
<div class="form-group">
<input type="email" name="email" class="form-control" ng-model="validate.email" placeholder="Email" required>
<span style="color:yellow" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</div>
<div class="form-group">
<input type="text" name="subject" class="form-control" ng-model="validate.subject" placeholder="Subject" required>
<span style="color:yellow" ng-show="myForm.subject.$dirty && myForm.subject.$invalid">
<span ng-show="myForm.subject.$error.required">Subject is required.</span>
</span>
</div>
<div class="form-group">
<textarea type="text" name="message" class="form-control" ng-model="validate.message" placeholder="Message..." required></textarea>
<span style="color:yellow" ng-show="myForm.message.$dirty && myForm.message.$invalid">
<span ng-show="myForm.message.$error.required">Message is required.</span>
</span>
</div>
<button type="submit" class="btn btn-lg btn-success"
ng-disabled="myForm.email.$dirty && myForm.email.$invalid ||
myForm.subject.$dirty && myForm.subject.$invalid ||
myForm.message.$dirty && myForm.message.$invalid"></button>
</form>
The button is disabled until the email, subject and message aren't correct. Ok, it's fine. But that is true, only if I have already interacted with the form.
In fact, when the page is loaded the first time and I haven't interacted with the form yet, the button is enabled. So, if I click it, I could send an empy email! I would that when the page is loaded the button is disabled and when I fill the fields become enabled.
How can I do that?
Thanks.
You first condition can be ng-disabled=" myForm.email.$invalid . Remove "myForm.email.$dirty
Try like this
<form name="postForm" method="POST" novalidate>
<div class="col-md-8">
<div class="col-md-12">
<div class="col-md-12"><legend>Submit New Post</legend></div>
</div>
<div class="col-md-12 form-group">
<div class="col-md-12" ng-class="{ 'has-error' : postForm.title.$invalid && !postForm.title.$pristine }">
<input type="text" placeholder="Write Title" class="form-control" name="title" ng-model="post.title" required>
<p ng-show="postForm.title.$invalid && !postForm.title.$pristine" class="text-danger">* Write Post Title</p>
</div>
</div>
<div class="col-md-12 form-group">
<div class="col-md-12" ng-class="{ 'has-error' : postForm.url.$invalid && !postForm.url.$pristine }">
<input type="url" placeholder="Write URL" class="form-control" name="url" ng-model="post.url" >
<p ng-show="postForm.url.$invalid && !postForm.url.$pristine" class="text-danger">* Write URL in http:// or https:// Format</p>
</div>
</div>
<div class="col-md-12">
<div class="col-md-12" >
<p class="text-danger">{{msg}}</p>
</div>
</div>
<div class="col-md-12 form-group">
<div class="col-md-12"><button type="submit" class="btn btn-info" ng-disabled="postForm.$invalid" ng-click="submitForm(....)">Submit</button>
<img src="img/loading.gif" ng-show="loading" /></div>
</div>
</div>
</form>
On your submit button, modify the ng-disabled to this:
ng-disabled="myForm.$invalid || myForm.$pristine">
In this case, you don't have to validate all your inputs separetely. Just test if your form is invalid OR if the user never interacted with it yet.
A form in AngularJS has two different states: pristine and dirty. The pristine indicates that your form was never touched. And dirty is the opposite. When the user set any value to one of your inputs, the angular change the state of your form from pristine to dirty.
I guess this post is a good reference to read about forms in angular