Why is my password and confirm password validation not working? It works fine in JS Fiddle but not working my program
Here's the Js fiddle link
<!DOCTYPE html>
<html ng-app="myApp" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('MainCtrl', function ($scope) {
$scope.cityArray = ["hyderabad", "secunderabad", "delhi", "mumbai"];
$scope.submit = function ($event) {
if ($scope.myForm.$invalid) {
// Or some other update
$scope.myForm.$submitted = true;
$event.preventDefault();
}
}
});
app.directive('nxEqualEx', function () {
return {
require: 'ngModel',
link: function (scope, elem, attrs, model) {
if (!attrs.nxEqualEx) {
console.error('nxEqualEx expects a model as an argument!');
return;
}
scope.$watch(attrs.nxEqualEx, function (value) {
// Only compare values if the second ctrl has a value.
if (model.$viewValue !== undefined && model.$viewValue !== '') {
model.$setValidity('nxEqualEx', value === model.$viewValue);
}
});
model.$parsers.push(function (value) {
// Mute the nxEqual error if the second ctrl is empty.
if (value === undefined || value === '') {
model.$setValidity('nxEqualEx', true);
return value;
}
var isValid = value === scope.$eval(attrs.nxEqualEx);
model.$setValidity('nxEqualEx', isValid);
return isValid ? value : undefined;
});
}
};
});
</script>
<title>Registration Form</title>
</head>
<body ng-controller="MainCtrl">
<div class="container">
<div class="col-md-6 col-md-offset-3">
<div class="panel panel-login">
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
<h2 class="text-muted">Registration form</h2>
<div>
<form name="myForm" action="RegistrationServlet.do" method="POST" novalidate>
Password:
<input type="password" nx-equal-ex="pwd" class="form-control" name="pwd" ng-model="pwd" required placeholder="Password"/>
<span style="color:red" ng-show="form.pwd.$error.nxEqualEx">Must be equal!</span>
Confirm Password:<input type="password" nx-equal-ex="pwd2" class="form-control" ng-model="pwd2" name="pwd2" required placeholder="Confirm Password"/>
<span style="color:red" ng-show="form.pwd2.$error.nxEqualEx">Must be equal!</span>
<button class="form-control btn btn-success" type="submit" ng-click="submit($event)">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
If I understand correctly, you should be using this:
nx-equal-ex="pwd"
instead of
nx-equal-ex="pwd2"
Related
I am creating a to-do list in angular js. I am trying to access the form in the controller. However, when I click the add new button, it doesn't add to the list.
There is also no error displaying which shows to me that the function probably isn't doing anything.
How do I get the add new button to add to the list.
Here is the index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<h1>To do List</h1>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="app.js"></script>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body ng-app="myApp" ng-controller="todoCtrl as vm">
<form name="vm.myform" ng-submit="toDoAdd()">
<input type="text" ng-model="todoInput" size="50" placeholder="Add New">
<input type="submit" ng-click="vm.toDoAdd " value="Add New">
<br>
<div ng-repeat="x in todoList">
<input type="checkbox" ng-model="x.done"><span ng-bind="x.todoText">
</span>
</div>
<p>
<button ng-click="remove()">Remove marked</button></p>
</form>
</body>
</html>
Here is app.js:
var app = angular.module('myApp', []);
app.controller('todoCtrl',['$scope' ,function ($scope) {
$scope.toDoList = [{todoText: "check", done: false}];
function todoAdd() {
var vm=this;
vm.toDoAdd=toDoAdd;
$scope.toDoAdd = function () {
$scope.toDoList.push({todoText: $scope.todoInput, done: false});
$scope.todoInput = "";
}
}
}])
I have made some changes to your application:
<body ng-app="myApp" ng-controller="todoCtrl">
<form ng-submit="toDoAdd()">
<input type="text" ng-model="todoInput" size="50" placeholder="Add New">
<input type="submit" value="Add New">
<br>
<div ng-repeat="x in toDoList">
<input type="checkbox" ng-model="x.done" /><span ng-bind="x.todoText">
</span>
</div>
<p>
<button type="button" ng-click="remove()">Remove marked</button></p>
</form>
</body>
var app = angular.module('myApp', []);
app.controller('todoCtrl',['$scope' ,function ($scope) {
$scope.toDoList = [{todoText: "check", done: false}];
$scope.toDoAdd = function () {
$scope.toDoList.push({todoText: $scope.todoInput, done: false});
$scope.todoInput = "";
}
}])
There are two ways of using controllers, one with $scope and other with controller as vm in this case for simplicity I am using $scope you can read more about the other notation in this guide
I am working on dynamic forms with ng-repeat. I am using the oi-select library for loading my locations. The oi-select box has multi select feature. on my page loading by default, I am loading first option value in that oi-select box.
But I am using a multi select feature if I select any other option than the first option it gets override with that value. Due to this issue, I have to select again that first option. My question is, how can I load my first option value by default into that oi-select?
Afterwards, if I am select any other options it won't override my first value in select box .Here is my plunker link http://plnkr.co/edit/m6Q02dlHLBCMVLRLfioh?p=preview
my HTML code
<body class="container row">
<div ng-app="myApp">
<div ng-controller="myCtrl">
<form role="form" name='userForm' novalidate>
<div class="container">
<div class="row" ng-repeat="user in users">
<div class="form-group">
<div class="col-md-3">
<label>ID</label>
<input ng-model="user.id" id="user.id" name="user.id" placeholder="Enter bugid" type="text" required readonly disabled>
</div>
<div class="col-md-3">
<label>Comments</label>
<textarea ng-model="user.comment" id="textarea1" rows="1" required></textarea>
</div>
<div class="col-md-3 ">
<label>Location</label>
<oi-select ng-model="user.location" multiple oi-options="v for v in locations" ng-init='initLocation(user)' name="select2" required>
</oi-select>
</div>
</div>
</div>
</div>
<div class="buttonContainer text-center btn-container">
<br>
<button ng-disabled="userForm.$invalid" type="button" id="adduser" ng-click="adduser()">Add user</button>
<button type="button" class="btn button--default btn--small pull-center">Close</button>
</div>
</form>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
</div>
</div>
my js code
var app = angular.module('myApp', ['ngResource', 'oi.select']);
app.controller('myCtrl', function($scope, $timeout) {
$scope.ids = [1, 2, 3];
$scope.users = $scope.ids.map(function(id) {
return {
id: id,
comment: "",
location: ""
};
});
$scope.locations = ['india', 'usa', 'jermany', 'china', 'Dubai'];
$scope.initLocation = (user) => {
$timeout(() => {
user.location = $scope.locations[0];
});
}
$scope.adduser = function() {
var data = $scope.users.map(function(user) {
return {
"userid": user.id,
"manualcomment": user.comment,
"location": user.location
}
});
console.log("data", data)
}
});
If you use multiple attribute, this means the model should be an array and not a string as in your case user.location = $scope.locations[0];, ypu have to change it to location: [] and use push() method to add the initial items to this array;
Using $timeout doesn't make any sense to me;
ngInit adds unnecessary amount of logic into the template, I would prefer avoid using it in you case, just use location: [$scope.locations[0]] in your controller.
Working example:
var app = angular.module('myApp', ['ngResource', 'oi.select']);
app.controller('myCtrl', function($scope, $timeout) {
$scope.ids = [1, 2];
$scope.locations = ['india', 'usa', 'jermany', 'china', 'Dubai'];
$scope.users = $scope.ids.map(function(id) {
return {
id: id,
comment: "",
location: []
};
});
$scope.initLocation = (user, locations) => {
if (!user.location.length) {
user.location.push(locations[0]);
}
}
$scope.adduser = function() {
$scope.users.push({
id: Math.max(...($scope.users.map(u => { return u.id; }))) + 1,
comment: "added from controller",
location: [$scope.locations[2]]
});
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link data-require="bootstrap#3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="//rawgit.com/tamtakoe/oi.select/master/dist/select.css" />
<script>document.write('<base href="' + document.location + '" />');</script>
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script>
<script data-require="angular-resource#1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-resource.js"></script>
<script src="//rawgit.com/tamtakoe/oi.select/master/dist/select-tpls.js"></script>
<script src="script.js"></script>
</head>
<body class="container row">
<div ng-app="myApp">
<div ng-controller="myCtrl">
<form role="form" name='userForm' novalidate>
<div class="container">
<div class="row" ng-repeat="user in users">
<div class="form-group">
<div class="col-md-3">
<label>ID</label>
<input ng-model="user.id" id="user.id" name="user.id" placeholder="Enter bugid" type="text" required readonly disabled>
</div>
<div class="col-md-3">
<label>Comments</label>
<textarea ng-model="user.comment" id="textarea1" rows="1" required></textarea>
</div>
<div class="col-md-3 ">
<label>Location</label>
<oi-select ng-model="user.location"
multiple oi-options="v for v in locations" ng-init='initLocation(user, locations)'
name="select2" required>
</oi-select>
</div>
</div>
</div>
</div>
<div class="buttonContainer text-center btn-container">
<br>
<button ng-disabled="userForm.$invalid" type="button" id="adduser" ng-click="adduser()">Add user</button>
<button type="button" class="btn button--default btn--small pull-center">Close</button>
</div>
</form>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
</div>
</body>
</html>
I have a "search" where the user input a value and i want to send this value in the service because i want that another controller can have access. But for the moment i can't do it, if someone can help me it would be very usfull i using Angular js.
And the js
var app = angular.module('MainApp', [])
app.factory('Search', function($rootScope, $http){
var search = '';
function setSearch(bus){
search = bus;
}
function getSearch(){
return search;
}
return{
setSearch : setSearch,
getSearch: getSearch
};
//return myFactory;
/*
$scope.Search = function() {
return {
getDoctor: function () {
return $http.get('api/doctor' + $scope.search.searchText).then(function (response) {
orders = response.data;
$rootScope.$broadcast('handleSharedOrders', orders);
return orders;
})
}
};
}*/
});
app.controller('mainController', function ($scope, $http, Search) {
$scope.loadList = function() {
location.href = "doctors";
};
$scope.search.searchText = Search.getSearch();
$scope.Search = function(bus) {
console.log(bus);
Search.setSearch(bus);
}
$scope.doctors = {};
$http.get('/api/doctor').success(function (data) {
$scope.doctors = data;
})
.error(function (data) {
console.log('Error: ' + data);
});
/*
$http.get('/api/doctor/' + specialty).success(function (data) {
$scope.doctorsSpecialty = data;
})
.error(function (data) {
console.log('Error: ' + data);
});
*/
});
<!DOCTYPE html>
<html ng-app="MainApp">
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<!-- Cargamos app -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="../Controllers/core.js"></script>
<title></title>
</head>
<body ng-controller="mainController">
<div align="center">
<img src="../img/logo.jpg" >
</div>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="login-panel panel panel-default" >
<div class="panel-heading" >
<h3 class="panel-title">Search Doctors</h3>
</div>
<div class="panel-body" >
<form role="form" >
<fieldset>
<div class="form-group" name="myForm" >
<input ng-model="search.searchText" type="text" class="form-control" placeholder="Search..." align="center">
</div>
<button class="btn btn-default" type="button" align="center" ng-click="Search(searchText)">
<b align="center">Search</b>
</button>
<!-- Change this to a button or input when using this as a form -->
</fieldset>
</form>
</div>
</div>
<div class="panel-heading" STYLE="background-color: #a7b5ce">
<h3 class="panel-title">List of Doctors</h3>
</div>
<div class="panel-body" >
<form role="form">
<fieldset>
<div class="form-group" name="myForm" >
<button class="btn btn-default" type="button" align="center" href=doctors ng-click="loadList()">
<b>List of Doctors</b>
</button>
</div>
<!-- Change this to a button or input when using this as a form -->
</fieldset>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
thank you for helping me
Here you have defined search.searchText:
<input ng-model="search.searchText" type="text" class="form-control" placeholder="Search..." align="center">
And here you are trying to pass just searchText (which is undefined):
<button class="btn btn-default" type="button" align="center" ng-click="Search(searchText)">
<b align="center">Search</b>
</button>
You need to either change your ng-model on your <input> to be 'search' or change the ng-click on your <button> to 'Search(search.searchText)'. If you choose to do the latter you may also want to explicitly create the search object in your controller.
I think you were doing it well, but your code has a few errors. First, you are not declaring the object search in your scope but you are assigning the property searchText to it. So you should do something like that:
$scope.search = {
searchText: ''
};
Then, in the view when you click search you are passing searchText but it should be search.searchText.
Have a look at this: https://jsfiddle.net/jruizx/54xcmgqp/
I'm looking at some odd code and I reran it to verify it works and for some reason its not and what is happening after I submit my form. Nothing seems to show up in my employeesList but if I refresh the screen then it will show up. Also, if I click the X to delete the user nothing happens and I receive no errors in the console.
Why can't I see the list of my employees unless I refresh my screen?
Why doesn't the employee get removed if I click my delete icon.
js/application.js
angular.module("employeesApp", []).controller("DBController", function ($scope, dataService) {
$scope.employeeName;
$scope.employeeStreet;
$scope.employeeCity;
$scope.employeeState;
$scope.employeeZipCode;
$scope.employeesList = dataService.getEmployees();
$scope.addEmployee = function() {
var employee = {
"employeeName": $scope.employeeName,
"employeeStreet": $scope.employeeStreet,
"employeeCity": $scope.employeeCity,
"employeeState": $scope.employeeState,
"employeeZipCode": $scope.employeeZipCode
};
dataService.addEmployee(employee);
$scope.employeeName = '';
$scope.employeeStreet = '';
$scope.employeeCity = '';
$scope.employeeState = '';
$scope.employeeZipCode = '';
}
$scope.deleteEmployee = function(deletedEmployee) {
dataService.removeEmployee(deletedEmployee);
}
});
js/dataService.js
angular.module("employeesApp").service("dataService", function () {
var employeesList = [];
this.getEmployees = function () {
var str = localStorage.getItem("Employees");
employeesList = JSON.parse(str) || employeesList;
return employeesList;
};
this.addEmployee = function (employee) {
var employeesList = this.getEmployees();
employeesList.push(employee);
var str = JSON.stringify(employeesList);
localStorage.setItem("Employees", str);
};
this.removeEmployee = function (employee) {
var employeesList = this.getEmployees();
employeesList.splice(employeesList.indexOf(employee), 1);
var str = JSON.stringify(employeesList);
localStorage.setItem("Employees", str);
};
});
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Employee Directory</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="css/application.css">
</head>
<body ng-app="employeesApp" ng-controller="DBController">
<div class="container">
<h1>Employee Directory</h1>
<hr>
<div class="row">
<div class="col-md-6">
<h3>Add an Entry</h2>
<form role="form">
<div class="form-group">
<label for="name">Employee:</label>
<input type="text" id="name" name="name" class="form-control" ng-model="employeeName">
</div>
<div class="form-group">
<label for="street">Street:</label>
<input type="text" id="street" name="street" class="form-control" ng-model="employeeStreet">
</div>
<div class="form-group">
<label for="city">City:</label>
<input type="text" id="city" name="city" class="form-control" ng-model="employeeCity">
</div>
<div class="form-group">
<label for="state">State:</label>
<input type="text" id="state" name="state" class="form-control" ng-model="employeeState">
</div>
<div class="form-group">
<label for="zipcode">Zip Code:</label>
<input type="text" id="zipcode" name="zipcode" class="form-control" ng-model="employeeZipCode">
</div>
<button type="submit" ng-click="addEmployee()" class="btn btn-primary">Add</button>
</form>
</div>
<div class="col-md-6" id="employee-list">
<div ng-repeat="employee in employeesList track by $index" class="employee">
<div class="employee-header">
<span class="glyphicon glyphicon-user"></span>
<strong>{{employee.employeeName}}</strong>
<span ng-click="deleteEmployee(employee)" class="glyphicon glyphicon-remove"></span>
</div>
<div class="employee-footer">
<address>
{{employee.employeeStreet}}<br>
{{employee.employeeCity}}, {{employee.employeeState}} {{employee.employeeZipCode}}
</address>
</div>
</div>
</div>
</div>
</div>
<script src="js/angular.min.js"></script>
<script src="js/application.js"></script>
<script src="js/dataService.js"></script>
</body>
</html>
It appears you are setting your scopes employeesList on the initial page load, however you are not re-associating this when you add employees or delete employees. You need to set $scope.employeesList every time you modify the data.
$scope.employeesList = dataService.getEmployees();
Is the line you are setting the data for your scope's view.
I'm trying to use a form with validation into a ui-bootstrap modal and the modal as a cancel button that just dismisses the view when clicked. The cancel is not working if there is validation errors. if I click again on the button then the modal closes. What am I possibly doing wrong?
http://plnkr.co/edit/loFUvJRfuycxd3qQwMgM?p=preview
angular.module('myApp', ['ui.bootstrap']);
angular.module('myApp').controller('TestCTRL', function ($scope,modalService) {
$scope.login = function () {
var modalOptions = {
closeButtonText: 'Cancel',
submitForm : function(form) {
if(form.$valid) {
console.log('Loggin in');
}
}
};
modalService.showModal({}, modalOptions).then(function (result) {
console.log('completed');
});
};
});
angular.module('myApp').service('modalService', function ($modal) {
var modalDefaults = {
backdrop: true,
keyboard: true,
modalFade: true,
templateUrl: 'login.html'
};
var modalOptions = {
closeButtonText: 'Close',
actionButtonText: 'OK',
headerText: 'Proceed?',
bodyText: 'Perform this action?'
};
this.showModal = function (customModalDefaults, customModalOptions) {
if (!customModalDefaults) customModalDefaults = {};
customModalDefaults.backdrop = 'static';
return this.show(customModalDefaults, customModalOptions);
};
this.show = function (customModalDefaults, customModalOptions) {
//Create temp objects to work with since we're in a singleton service
var tempModalDefaults = {};
var tempModalOptions = {};
//Map angular-ui modal custom defaults to modal defaults defined in service
angular.extend(tempModalDefaults, modalDefaults, customModalDefaults);
//Map modal.html $scope custom properties to defaults defined in service
angular.extend(tempModalOptions, modalOptions, customModalOptions);
if (!tempModalDefaults.controller) {
tempModalDefaults.controller = function ($scope, $modalInstance) {
$scope.modalOptions = tempModalOptions;
$scope.modalOptions.ok = function (result) {
$modalInstance.close(result);
};
$scope.modalOptions.close = function (result) {
$modalInstance.dismiss('cancel');
};
}
}
return $modal.open(tempModalDefaults).result;
};
});
<!DOCTYPE html>
<html>
<head >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="ui-bootstrap.js"></script>
<meta charset="utf-8">
<title>test</title>
</head>
<body ng-app="myApp">
<div ng-controller="TestCTRL">
<button type="button" ng-click="login()">Login</button>
</div>
<script src="app.js"></script>
</body>
</html>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4 col-md-offset-4">
<div class="account-wall">
<h1 class="text-center login-title">Login</h1>
<form name="loginForm" ng-submit="modalOptions.submitForm(loginForm)" class="form-signin" novalidate>
<div class="form-group">
<label for="email" class="control-label">Email</label>
<input id="email" type="email" name="email" placeholder="Email"
class="form-control" ng-model="user.email" required autofocus>
<div ng-messages="loginForm.email.$error" ng-if="loginForm.$submitted || loginForm.email.$touched" class="errors">
<div ng-message="required">Value required</div>
<div ng-message="email">Valid email required</div>
</div>
</div>
<div class="form-group">
<label for="password" class="control-label">Password</label>
<input id="password" type="password" name="password" placeholder="Password"
class="form-control" ng-model="user.password" required>
<div ng-messages="loginForm.password.$error" ng-if="loginForm.$submitted || loginForm.email.$touched" class="errors">
<div ng-message="required">password is required</div>
</div>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">
Login
</button>
<button class="btn btn-lg btn-primary btn-block" type="button" ng-click="modalOptions.close()">
{{modalOptions.closeButtonText}}
</button>
</form>
</div>
</div>
</div>
</div>
Thanks so much for your help.
I resolved it by setting the form to pristine before closing the modal, in the cancel action function
function _cancel()
{
$scope.newForm.$setPristine();
$modalInstance.close();
}