I am checking if the username exists in firebase database and I am able to alert the user with a message if its already taken.
how do I disable submit button ?
<form ng-submit="validateForm()" style="margin-left:100px; margin-top:50px;">
<div class="form-group">
<label>User Name</label>
<input ng-model="user.userName" required type="text" class="form-control border-input" placeholder="userName">
<ul ng-repeat="(key,value) in userObject">
<span ng-if="user.userName == key" class="text-danger">User name already exists!</span>
</ul>
</div>
<button type="submit" class="btn btn btn-info btn-fill btn-wd">Save</button>
</form>
You need to change your code to this.
in your controller
if(user.userName == key)
{
$scope.chkuser= true;
}
else
{
$scope.chkuser= false;
}
and set this variable it to ngDisabled on submit button
<button type="submit" class="btn btn btn-info btn-fill btn-wd" ngDisabled="chkuser">Save</button>
Related
I have a login JWT Auth with Angular and i want my template ng-include (header) hide my "login/subscribe link" and show my "logout" link.
But that's doesn't work... Or i need to refresh my webpage and i don't want.
how create a login/logout in a ng-include template ?
I have: ui.router, aclservice, jwt auth, angular 1.5.8
Thx
MY HEADER (NG-INCLUDE IN INDEX.HTML BEFORE THE VIEW)
<ul class="list-inline">
<li ng-hide="goLog"><i class="glyphicon glyphicon-user"></i> Sign up</li>
<li ng-hide="goLog">Sign in</li>
<li ng-show="goLog">Logout</li>
</ul>
PART OF MY CONTROLLER LOGIN
function login(username, password) {
auth.login(username, password).then(loginComplete);
function loginComplete() {
if (AclService.hasRole(ROLE_ADMIN)) {
$state.go('dashboard');
} else {
$state.go('home');
}
}
}
MY VIEW LOGIN
<form name="form" role="form" ng-submit="vm.login(vm.username, vm.password)">
<div class="form-group">
<input type="text" placeholder="e-mail" class="form-control input-lg" ng-model="vm.username" required autofocus>
</div>
<div class="form-group">
<input type="password" placeholder="Mot de passe" class="form-control input-lg" ng-model="vm.password" required>
</div>
<div class="form-group go-to">
<button type="submit" class="btn btn-lg btn-block" ng-disabled="form.$invalid || dataLoading">Login</button>
</div>
</form>
Try this link:
https://code.tutsplus.com/tutorials/token-based-authentication-with-angularjs-nodejs--cms-22543
Above link clearly explains signing up process using JWT token.
To hide and show login logout use:
<div class="form-group go-to">
<button type="submit" data-ng-show="!isLoggedIn" class="btn btn-lg btn-block" ngdisabled="form.$invalid||dataLoading">Login</button>
<button type="submit" data-ng-show="isLoggedIn" class="btn btn-lg btn-block" ngdisabled="form.$invalid ||dataLoading" ng-click="logOut()">Logout</button>
</div>
manage the 'isLoggedIn' variable in controller based on login status.
On successful login set 'isLoggedIn = true'
I have a form. Post submit, if the form is invalid, the error props out below the input fields.
One can hide the form using Cancel button.
The form can be displayed again using 'Show Form' button.
But the issue: The old form error still persists.
How can one reset the form without setting the ng-model associated with it as the input fields should be empty during load?
The reset, I should be able to do it from html itself and not from the controller.
Code below:
<form novalidate name="form.customForm">
<div class="form-group">
<div>
<label>Name</label>
</div>
<div>
<input type="text" name="name" ng-model="model.name" class="form-control" ng-required="true" />
<span class="red" ng-show="(form.customForm.name.$touched && form.customForm.name.$error.required) || (form.customForm.name.$error.required && form.customForm.$submitted)">Name cannot be empty</span>
</div>
</div>
<div class="form-group">
<div>
<label>Age</label>
</div>
<div>
<input type="text" name="age" ng-model="model.age" class="form-control" ng-required="true" />
<span class="red" ng-show="(form.customForm.age.$touched && form.customForm.age.$error.required) || (form.customForm.age.$error.required && form.customForm.$submitted)">Age cannot be empty</span>
</div>
</div>
<button class="btn btn-primary" type="submit" ng-click="submit(form.customForm.$valid);">
Submit
</button>
<button class="btn btn-default" type="button" ng-click="isForm = false;">
Cancel
</button>
</form>
Refer the demo.
I would suggest you write the cancel button logic in the controller, are you sure you want to do it from the html itself?, you can use these statements to reset the form and fields.
form.customForm.$setPristine();
model = {};
form.customForm.$setUntouched();
The updated jsfiddle
On click on Cancel button, you could set
form.customForm.$submitted = false;
This will hide the error messages.
Your cancel button becomes:
<button class="btn btn-default" type="button"
ng-click="isForm = false; form.customForm.$submitted = false;">
Cancel
</button>
See jsfiddle
give the form a name:
<div ng-controller="BlaController as vm">
<form name="vm.formOne">
</form>
</div>
And in the controller do this: (thats how I made it work)
if (vm.formOne) {
vm.formOne.$setPristine();
vm.formOne.$setUntouched();
vm.formOne.$commitViewValue();
}
what about just change the cancel button type to "reset" ?? It's the easiest solution
<button class="btn btn-default" type="reset" ng-click="isForm = false;">
Cancel
</button>
$scope.cancel = function(form){
$scope.isForm = true;
form.customForm.$submitted=false;
form.customForm.name.$touched = false;
form.customForm.age.$touched=false;
}
<button class="btn btn-default" type="button" ng-click="cancel(form)" ng-show="!isForm">
Fiddle Demo
Or
<button class="btn btn-default" type="button" ng-click="isForm = true;
form.customForm.$submitted=false;
form.customForm.name.$touched = false;
form.customForm.age.$touched=false;" ng-show="!isForm">
Fiddle Demo
NOT DUPLICATED
I have a search with an input, a button and another button to toggle the advanced search:
<form role="form">
<div class="form-group ">
<input type="text" id="search-input" ng-model="searchTerm" autocomplete="off" autofocus ng-keydown="onKeyDownEnter($event)" />
<div class="btn-group " >
<button type="button" ng-click="search()" class="btn btn-default">Submit</button>
<button class="btn dropdown-toggle downArrow" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Desplegar menú</span>
</button>
<div id="subMenu" class="dropdown-menu advanced-search">
<div class="form-group">
<label for="usr">Find documents with...</label>
<input type="text" class="form-control" ng-model="adSearch.q1">
</div>
<div class="form-group">
<label for="usr">And</label>
<input type="text" class="form-control" ng-model="adSearch.q2">
</div>
<div class="form-group">
<label for="usr">Or</label>
<input type="text" class="form-control" ng-model="adSearch.q3">
</div>
<div class="form-group">
<label for="usr">Not</label>
<input type="text" class="form-control" ng-model="adSearch.q4">
</div>
</div>
</div>
</div>
</form>
When i press the enter key, the button of the advanced search is which takes the action.
I would like to know what can i do to the normal search (the fisrt button) takes the action when i press the enter key.
I do not want use jquery or javascript i need to do it with angularjs, i thought i could do it with just css but seems like i can not.
I can use this:
$scope.onKeyDownEnter = function($event){
if ($event.keyCode === 13) {
console.log("yeeeee");
}
};
But this also toggle the "subMenu", I do not know how to disable the behavior of that "subMenu" when i press the enter key.
Extra information:
Here i have the subMenu before press enter key
Here i have the subMenu after press enter key
I do not know why this code was the cause of this problem:
<button class="btn dropdown-toggle downArrow" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Desplegar menú</span>
</button>
If you have this problem, just add type="button" like this:
<button type="button" class="btn dropdown-toggle downArrow" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Desplegar menú</span>
</button>
And all will work fine
As you have used autofocus in your search input box you can use jquery to get focus on your normal search button:
$(document).ready(function(){
$('#search-button').blur(function(){ $('#save-btn').focus(); });
});
Ps: please give ID to your button save-btn to get this working.
Did you try to apply focus ?
Like this :
$('#myButton').focus();
When validating my form for a password I did previously just have that the password field was required, but now that I am applying conditions to how many characters the password must have ect, and I can't seem to get this part working.
I have this function that displays the correct message to the user as they are typing,
$scope.$watch(
function ($scope, $rootScope) {
if ($scope.user.NewPassword != 'undefined') {
if ($scope.user.NewPassword.length < 8) {
$scope.errorMessage = "Your password must contain more than 8 characters.";
$scope.validPassword = false;
return true;
} else if (!authService.regExpPasswordValidation().exec($scope.user.NewPassword)) {
$scope.errorMessage = "Your password does not meet the minimum password complexity. Please make sure it contains at least 1 uppercase character, 1 lowercase character, 1 number, and 1 non-alphanumeric character.";
$scope.validPassword = false;
return true;
} else {
$scope.validPassword = true;
return false;
}
}
}
);
The problem with this is that the submit button at the bottom of the form is still clickable as soon as anything has been typed, despite the error message displaying correctly, which I do not want.
Here are the relevant sections of the form,
<div class="form-group required" ng-show="!user.CtsAccount">
<label for="inputPassword" class="col-sm-3 control-label">Password</label>
<div class="col-sm-9">
<input type="password" class="form-control" id="inputPassword" name="password" placeholder="Password" ng-required="!user.CtsAccount && FormTitle=='Add User'" ng-model="user.NewPassword">
</div>
</div>
<div ng-show="!userForm.password.$pristine">
<div class="alert alert-dismissible alert-warning" ng-show="!validPassword">
<p>{{errorMessage}}</p>
</div>
</div>
--
<div class="modal-footer">
<button type="submit" ng-click="save()" ng-if="user.Id" ng-disabled="userForm.$invalid" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk"></span> Save User</button>
<button type="submit" ng-click="add()" ng-if="!user.Id" ng-disabled="userForm.$invalid" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk"></span> Add User</button>
<button ng-click="cancel()" class="btn btn-default">Cancel</button>
</div>
Any ideas about the best way of getting this working?
It is quite simple. For the ng-disabled along with your form invalid property, you can also check $scope.validPassword as bellow.
Here is the edited code:
<div class="modal-footer">
<button type="submit" ng-click="save()" ng-if="user.Id" ng-disabled="userForm.$invalid || !$scope.validPassword" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk"></span> Save User</button>
<button type="submit" ng-click="add()" ng-if="!user.Id" ng-disabled="userForm.$invalid || !$scope.validPassword" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk"></span> Add User</button>
<button ng-click="cancel()" class="btn btn-default">Cancel</button>
</div>
I have a form where by a user is presented with a "Save Changes" button first, if the user clicks this button and there are no validation issues the user will be presented with a "Confirm Changes" button.
My code to achieve this:
<div class="col-xs-12">
<span ng-hide="confirm">
<button type="button" class="vfnz-submit" ng-click="confirm = ! confirm;">Save changes</button>
<a ng-href="#/huntgroups/" class="vfnz-reset">Cancel</a>
</span>
<div class="hide" ng-class="{ 'hide': ! confirm }">
<button type="submit" class="vfnz-submit confirm-changes">Confirm changes</button>
<a class="vfnz-reset" ng-click="confirm = ! confirm;">Cancel</a>
</div>
</div>
This is working well however, If there are any errors within the form I want the errors to show on "Save Changes". The logic I have to ensure validation shows on submit is like so:
$scope.submitForm = function(form, isValid){
if (!isValid){
$scope.submitted = true;
} else {
$scope.submitted = false;
}
}
I'm unsure what to change or how to achieve the changes I'm after.
Just to reiterate:
On save changes, show error messages if any. If there are error messages, don't show confirm changes. If there are no error messages, show confirm changes and then submit.
you want something like this.... tweak it...
I have a better example but its on my work laptop ... can give it to you tomorrow :)
jsfiddle
<form name="form" no-validate ng-app>
<div class="control-group" ng-class="{true: 'error'}[submitted && form.email.$invalid]">
<label class="control-label" for="email">Your email address</label>
<div class="controls">
<input type="email" name="email" ng-model="email" required />
<span class="help-inline" ng-show="submitted && form.email.$error.required">Required</span>
<span class="help-inline" ng-show="submitted && form.email.$error.email">Invalid email</span>
</div>
</div>
<button type="submit" class="btn btn-primary btn-large" ng-click="submitted=true">Submit</button>
</form>