I making a login form with AngularJS. After entering user & password and on clicking the Login button I am trying to retrieve those values. But those are printed as undefined.
My code looks like below.
Javascript
File: app.js
var mdmApp = angular.module('mdmApp', [ 'ngRoute' ]);
mdmApp.config(function($routeProvider, $httpProvider) {
$routeProvider.when('/home', {
templateUrl : 'partials/home.html',
controller : 'homeController'
}).when('/login', {
templateUrl : 'partials/login.html',
controller : 'loginController'
});
}).controller('homeController', function($scope) {
}).controller('loginController', function($scope) {
var user = $scope.user;
var password = $scope.password;
$scope.login = function() {
console.log($scope.user + "-" + $scope.password);
}
})
HTML
File : partials/login.html
<link href="../bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
<form role="form" ng-submit="login()">
<div ng-app="mdmApp" ng-controller="loginController">
<div class="form-group" >
<label for="user" class="control-label">User</label>
<input id="user" type="text" ng-bind="user" class="form-control">
</div>
<div class="form-group">
<label for="password" class="control-label">Password</label>
<input id="password" type="password" ng-bind="password" class="form-control">
</div>
<div class="form-group">
<input type="submit" value="Login" class="btn btn-primary">
<input type="reset" value="Reset" class="btn btn-primary">
</div>
</div>
</form>
You should be using ng-model, not ng-bind:
<input id="user" type="text" ng-model="user" class="form-control">
<input id="password" type="password" ng-model="password" class="form-control">
Related
(function() {
var app = angular.module('snc', []);
app.controller("QueryController", function($http) {
this.query = {};
this.sendQuery = function(contact) {
contact.querys.push(this.query);
this.query = {};
};
});
})();
<form name="queryForm" ng-controller="QueryController as queryCtrl" ng-submit="queryForm.$valid && queryCtrl.sendQuery(contact)" novalidate>
<blockquote>
<b>Name: {{queryCtrl.query.name}}</b><br/>
<b>Mobile: {{queryCtrl.query.mobile}}</b><br/>
<b>Eamil: {{queryCtrl.query.email}}</b><br/>
<b>Message: {{queryCtrl.query.message}}</b><br/>
</blockquote>
<div class="form-group">
<label for="Name">Name:<span class="required">*</span></label>
<input type="text" ng-model="queryCtrl.query.name" class="form-control" id="name" placeholder="Enter Your Name" required>
</div>
<div class="form-group">
<label for="Mobile">Mobile:<span class="required">*</span></label>
<input type="number" ng-model="queryCtrl.query.mobile" class="form-control" id="mobile" placeholder="Enter Your Mobile Number" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" ng-model="queryCtrl.query.email" class="form-control" id="email" placeholder="Enter Your Email" required>
</div>
<div class="form-group">
<label for="Message">Message:</label>
<textarea type="text" ng-model="queryCtrl.query.message" class="form-control" id="name" placeholder="Enter Your Message" rows="4" required></textarea>
</div>
<div> reviewForm is {{queryForm.$valid}} </div>
<button type="submit" class="btn btn-snc">Submit</button>
</form>
I'm Using ng-app="snc" and Angularjs version 1.6, this is a simple contact form please check it and give me some advice. i want to send contact form into php page, where i use form data for send email for query and add it into database.
Try this code sample code
(function() {
var app = angular.module('snc', []);
app.controller('QueryController', function($scope, $http) {
$scope.query = {};
$scope.submit = function() {
console.log($scope.query);
$http({
method: "POST",
url: "", //php url
data: {
query
}
}).then(function mySuccess(response) {
console.log(response);
}, function myError(response) {
console.log(response);
});
};
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form name="fromvalue" ng-app="snc" ng-controller="QueryController">
<b>Name: {{query.name}}</b><br/>
<div class="form-group">
<label for="Name">Name:<span class="required">*</span></label>
<input type="text" ng-model="query.name" class="form-control" id="name" placeholder="Enter Your Name" required>
</div>
<div> reviewForm is {{fromvalue.$valid}} </div>
<button type="submit" ng-click="submit()" class="btn btn-snc">Submit</button>
</form>
im working on a project and im having troubles posting form data from my angularJS frontend to my backend RESTful API using restangular. each time i try i get a error code 400(bad request). heres my code below
app.js
'use strict';
angular
.module('clientApp', ['ngRoute', 'restangular'])
.config(function ($routeProvider, RestangularProvider) {
RestangularProvider.setBaseUrl('http://127.0.0.1:3000');
$routeProvider
.when('/', {
templateUrl: 'views/login.html',
controller: 'LoginCtrl',
controllerAs: 'login'
})
.when('/create/user', {
templateUrl: 'views/user-add.html',
controller: 'UserAddCtrl',
controllerAs: 'userAdd'
})
.otherwise({
redirectTo: '/'
});
});
view/user.html
<div ng-controller="UserAddCtrl">
<form class="form-horizontal" name="regForm" ng-submit="saveUser()">
<fieldset>
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">First Name</label>
<div class="col-md-4">
<input id="Fname" name="Fname" type="text" ng-model="newUser.FnameValue" placeholder="Enter First Name" class="form-control input-md" required>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="Last Name">Last Name</label>
<div class="col-md-4">
<input id="Lname" name="Lname" ng-model="newUser.LnameValue" type="text" placeholder="Enter Last Name" class="form-control input-md">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="Staff ID">Staff ID</label>
<div class="col-md-4">
<input id="StaffId" name="StaffId" ng-model="newUser.StaffIdValue" type="text" placeholder="Enter Staff ID" class="form-control input-md" required>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="Email">Email</label>
<div class="col-md-4">
<input id="Email" name="Email" ng-model="newUser.EmailValue" type="text" placeholder="Enter Email" class="form-control input-md" required="">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="Password">Password</label>
<div class="col-md-4">
<input id="Password" name="Password" ng-model="newUser.PasswordValue" type="password" placeholder="Enter Password" class="form-control input-md" required>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="Register"></label>
<div class="col-md-4">
<button id="Register" name="Register" type="submit" class="btn btn-primary">Creat User</button>
</div>
</div>
</fieldset>
</form>
</div>
controller/user.js
'use strict';
angular.module('clientApp')
.controller('UserAddCtrl', function ($scope, Restangular, $location) {
$scope.saveUser = function() {
$scope.newUser = {};
var restVar = Restangular.all('user');
restVar.post($scope.newUser).then(function() {
$location.path('/users');
console.log('Success');
}, function(response) {
console.log('Error with status code', response.status);
});
};
});
each time i execute the about codes, i get 400(bad request)... what im i doing wrong?
please note that im using mongodb and my db name is isdbmeanapp and my collection name is user, hence my server url is http://127.0.0.1:3000/user
In Restangular posts should be done to collections not elements.
In your case POST should be made like this;
$scope.newUser = {email :"", password: "", etc: ""};
Then make POST request like;
Restangular.all('user').post("users", $scope.newUser);
Reference;
https://github.com/mgonto/restangular#element-methods
Restangular POST form data in json format in Angular JS
Here is my controller file
'use strict';
cms.controller('homeController', function($scope, $http, $window) {
$scope.registerClinic = function () {
var dataParam={
"primaryEmailId": $scope.data1.emai
}
console.log(angular.toJson(dataParam));
$http({
url: "/cms/sign-up",
method: "POST",
headers :{'Content-Type': 'application/json','Accept': 'application/json' },
data: dataParam
})
.success(function(response) {
console.log(angular.toJson(response));
});
};
});
Here is my Html file
in my html file there is ng-model="data1.emai" value when
i want to parse it through a form in a controller it is not happening
<body>
<div class="modal-dialog" style="background: rgb(255, 255, 255);">
<div class="modal-body login metrial">
<div class="modal-body login metrial">
<div class="col-sm-6">
<h4 class="modal-title">Sign up</h4>
<form id="loginform2" ng-submit="registerClinic()" name="loginform2" novalidate>
<div class="form-group">
<input name="email" placeholder="Email ID" ng-class="{'invalid-field': loginform2.emai.$touched || loginform2.$submitted, 'valid-field': loginform2.emai.$valid}"
ng-model="data1.emai" ng-pattern="/^[a-zA-Z0-9]+[a-zA-Z0-9._]+#[a-zA-Z0-9]+\.[a-zA-Z.]{2,}$/" type="text" required>
<span ng-show="loginform2.emai.$touched && loginform2.emai.$error.pattern" class="error-geni">Invalid email</span>
<!-- <label class="field-title">Email ID</label> -->
</div>
<div class="margin-bottom-20">
<div style="width:20%" class="input-group-addon-signup">
<input value="+91" disabled="" type="text"></div>
<div class="input-group-addon-signup"><input id="mobil" ng-class="{'invalid-field': loginform2.mobil.$touched || loginform2.$submitted, 'valid-field': loginform2.mobil.$valid}" onkeypress="return isNumber(event,'mobil');" placeholder="Mobile No" type="text"
ng-minlength="10" ng-maxlength="10" name="mobil" maxlength="10" ng-model="data1.mobil" ng-pattern="/^$|^[0-9X]{10}$/" required>
<span ng-show="loginform2.mobil.$touched && loginform2.mobil.$error.pattern" class="error-geni"> Invalid Mobile Number </span> </div>
<!-- <label class="field-title">Mobile No</label>-->
</div>
<div class="form-group">
<input id="clinic" ng-model="data1.clinic" placeholder="Clinic Name" type="text">
<!-- <label class="field-title">Clinic Name</label> -->
</div>
<select class="form-group" id="subscriptionplans" ng-model="data.Subscription" value="Subscription">
<option id="optionspec">Trial Subscription</option>
<option value="0">Silver</option>
<option value="1">Gold</option>
<option value="1">Platinum</option>
</select>
<div class="form-group">
<input name="signupPassword" id="signupPassword" placeholder="Password" ng-class="{'invalid-field': loginform2.signupPassword.$touched || loginform2.$submitted, 'valid-field': loginform2.signupPassword.$valid}" ng-model="data1.signupPassword"
ng-minlength="8" ng-maxlength="20" type="password" required>
<span ng-show="loginform2.signupPassword.$touched && loginform2.signupPassword.$error.minlength || loginform2.signupPassword.$touched && loginform2.signupPassword.$error.maxlength" class="error-geni">Password must be 8-20 characters long and must have at least one uppercase character & one number and can have special characters -_/##</span>
</div>
<!--confirm Password-->
<div class="form-group">
<input name="docPassword2" id="docPassword2" ng-class="{'invalid-field': loginform2.docPassword2.$touched || loginform2.$submitted, 'valid-field': loginform2.docPassword2.$valid}" placeholder="Confirm Password"
ng-model="data1.docPassword2"
class="gui-input" required ng-compare="loginform2.signupPassword"
ng-disabled="!loginform2.signupPassword.$valid" type="password"/>
<span ng-show="loginform2.docPassword2.$touched && loginform2.docPassword2.$error.compare1" class="error-geni">Password Mismatch </span>
</div>
<button type ="submit" class="btn pull-right" type="button">SIGN UP</button>
</form>
</div>
</div>
</div>
</body>
EDIT : i tried to access through data1.emai it error
angular.min.js:108 TypeError: Cannot read property 'emai' of undefined
at n.$scope.registerClinic (home-controller.js:37)
at fn (eval at compile (angular.min.js:212), <anonymous>:4:262)
at f (angular.min.js:252)
at n.$eval (angular.min.js:134)
at n.$apply (angular.min.js:135)
at HTMLFormElement.<anonymous> (angular.min.js:252)
at HTMLFormElement.c (angular.min.js:35)is saying
I cant understand why my value is not going under $scope in controller through html
EDIT when i am deleting all the values from input
it is working.. but not found the exact problem
you access it from the scope like this:
"primaryEmailId": $scope.emai
while in the template you bind it that way:
ng-model="data1.emai"
You need to have data1 object in the scope to make it consistent, e.g.:
"primaryEmailId": $scope.data1.emai
initialize the $scope.data1 object in controller,
cms.controller('homeController', function($scope, $http, $window) {
$scope.data1 = {};
.....
}
hope this helps.
I am trying to follow John Papa's Angular Style Guide however i cannot get the model data of input file with ngClick.
When i try with $scope everything works just fine.
Here is the Demo on Plnkr.
Glad for your help.
In the ng-model instead of assigning directly to vm, assign it to vm.data and pass vm.data as argument to ng-click like data-ng-click="vm.saveEvent(vm.data)"
<form>
<fieldset>
<div class="form-group">
<label for="eventName">Event Name:</label>
<input id="eventName" type="text" data-ng-model="vm.data.name" placeholder="Name of your event"/>
</div>
<div class="form-group">
<label for="eventDate">Event Date:</label>
<input id="eventDate" type="text" data-ng-model="vm.data.date" placeholder="format (mm/dd/yyyy)"/>
</div>
<div class="form-group">
<label for="eventTime">Event Time:</label>
<input id="eventTime" type="text" data-ng-model="vm.data.time" placeholder="Time of your event"/>
</div>
<div class="form-group">
<label for="eventLocation">Event Location:</label>
<input id="eventLocation" type="text" data-ng-model="vm.data.location.addresss" placeholder="Address of your event"/>
</div>
<div class="form-group">
<input id="eventCity" type="text" class="input-small" data-ng-model="vm.data.location.city" placeholder="City"/>
<input id="stateProvince" type="text" class="input-small" data-ng-model="vm.data.location.province" placeholder="Province"/>
</div>
<div class="form-group">
<label for="eventImageUrl">Image:</label>
<input id="eventImageUrl" type="text" class="input-xlarge" data-ng-model="vm.data.imageUrl" placeholder="Url of image"/>
</div>
</fieldset>
{{vm.data.name}}
<img data-ng-src="{{vm.data.imageUrl}}"/>
<br/>
<br/>
<div class="form-group">
<button type="submit" class="btn btn-primary" data-ng-click="vm.saveEvent(vm.data)">Save</button>
<button type="button" class="btn btn-default" data-ng-click="vm.cancelEvent(vm.data)">Cancel</button>
</div>
</form>
Controller:
eventsApp.controller('EditEventController',
function EditEventController() {
var vm = this;
this.data = {};
vm.saveEvent = saveEvent;
function saveEvent(event) {
window.alert("event" + event.name + ' saved');
console.log(vm.data);
}
//vm.saveEvent = function(event) {
// window.alert("event" + event.name + ' saved');
//};
}
);
http://plnkr.co/edit/AxdA7vc70aTw3RojofVY?p=preview
ng-click="vm.saveEvent(vm.data)" did not work for me with Angular 1.4.
My solution was to use the control variable name.
e.g. "LoginController as loginctrl" so <button ng-click="loginctrl.doLogin()">Login</button>
Then in my control I was able to use this for the doLogin function inside my LoginController:
/* #ngInject */
function LoginController() {
/*jshint validthis: true */
var vm = this;
vm.title = 'Login';
function doLogin() {
...
}
I'm using the angular-ui Routing, but when nesting it keeps loading the main index file over and over again I think, I'm working in Visual Studio and it starts lagging when I go to that page, but the other ones are no problem
this is the code in routing:
$stateProvider
.state("stateOne", {
url: "/stateOne",
templateUrl: "/routesDemo/one"
})
.state("stateTwo", {
url: "/stateTwo?donuts",
templateUrl: function(params) { return "/routesDemo/two?donuts=" + params.donuts; }
})
.state("stateThree", {
url: "/stateThree",
templateUrl: "/routesDemo/three"
})
.state("stateAllProducts", {
url: "/Products",
templateUrl: "/product/all",
controller: ProductJsController
})
.state("loginRegister", {
url: "/loginRegister?returnUrl",
views: {
"": {
templateUrl: "/Account/LoginRegister",
},
"login#loginRegister": {
templateUrl: "/Account/Login",
controller: LoginController
},
"register#loginRegister": {
templateUrl: "/Account/Register",
controller: RegisterController
}
}
});
The content of LoginRegister is as following:
<div ui-view="login"></div>
<div ui-view="register"></div>
Login
<div class="col-lg-6">
<div class="bs-component">
<form class="form-horizontal" ng-submit="login()">
<fieldset>
<legend>Login</legend>
<div class="form-group">
<label for="emailAddress" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<div class="form-control-wrapper">
<input type="email" class="form-control empty" ng-model="loginForm.emailAddress" id="emailAddress" placeholder="Email"><span class="material-input"></span></div>
</div>
</div>
<div class="form-group">
<label for="password" class="col-lg-2 control-label">Password</label>
<div class="col-lg-10">
<div class="form-control-wrapper">
<input type="password" class="form-control empty" ng-model="loginForm.password" id="password" placeholder="Password"><span class="material-input"></span></div>
<div class="checkbox">
<label>
<input type="checkbox" ng-model="loginForm.rememberMe"><span class="ripple"></span><span class="check"></span> Remember me?
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button class="btn btn-default">Cancel</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</fieldset>
</form>
<div id="source-button" class="btn btn-primary btn-xs" style="display: none;">
< >
<div class="ripple-wrapper"></div>
</div>
</div>
<div class="alert alert-dismissable alert-danger" ng-if="loginForm.loginFailure">
<button type="button" class="close" data-dismiss="alert" ng-click="closeError()">×</button>
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
</div>
Register
<form ng-submit="register()">
<label for="emailAddress">Email Address:</label>
<input id="emailAddress" type="text" ng-model="registerForm.emailAddress" required/>
<label for="password">Password:</label>
<input id="password" type="password" ng-model="registerForm.password" required/>
<label for="confirmPassword">Confirm Password:</label>
<input id="confirmPassword" type="password" ng-model="registerForm.confirmPassword" required/>
<button type="submit">Register</button>
</form>
<div ng-if="loginForm.registrationFailure">
D'oh!
</div>
Please provide the index HTML file. Your view may not be able to be rendered if you controller is not loading. Please also provide one of your controller files.
You need to enclose your controller names in quotes, the same way they are in the controller.
.state("stateAllProducts", {
url: "/Products",
templateUrl: "/product/all",
controller: ProductJsController
Looks like it should be:
.state("stateAllProducts", {
url: "/Products",
templateUrl: "/product/all",
controller: 'ProductJsController'
Without seeing more code, this is the best I can provide.