I have a login form that I trying to collect data from to send to my api, the html looks a little like this,
<form novalidate ng-controller="loginController" ng-submit="doLogin()">
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email" ng-model="formData.username">
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" ng-model="formData.password">
</form>
my login controller looks like this,
var app = app || {};
app.controller('loginController', function($scope, $routeParams, authentication) {
$scope.formData = {};
$scope.doLogin = function(form) {
//authentication.authenticate();
console.log($scope.formData);
}
});
the doLogin function runs on form submit but $scope.formData is empty, I would expect to have a username and a password attribute?
The problem here is that you are making username type="email" and html5 validates with a regex pattern, that the value entered must be valid like: "alex#h.com" here I attach an example on code pen: http://codepen.io/alex06/pen/NRvXNm
and also info about this in angular docs: https://docs.angularjs.org/api/ng/input/input%5Bemail%5D
angular
.module('myApp',[])
.controller('loginController', function($scope) {
$scope.formData;
$scope.doLogin = function(form) {
//authentication.authenticate();
console.log($scope.formData);
}
});
<div ng-app="myApp">
<form novalidate ng-controller="loginController" ng-submit="doLogin()" name="myForm">
<input type="email" name="emailInput" class="form-control" id="exampleInputEmail1" placeholder="Enter email" ng-model="formData.username">
<span style="color: red;" ng-show="myForm.emailInput.$error.email">error</span>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" ng-model="formData.password">
<input type="submit">
</form>
</div>
Related
I have recently started working on AngularJS 1.6.
I am trying to submit a form programmatically. The reason is I want to validate a few fields (required field validation). I have spent a lot of efforts (probably 3-4 hours) trying to make this work but none of the existing answers on stack overflow or AngularJS docs seems to be working for me today (strange), hence I am posting this as last resort.
Below is my html
<form method="post" id="loginform" name="loginform" ng-submit="loginUser()" novalidate>
<div>
{{message}}
</div>
<div>
<label>User Name</label>
<input type="text" id="txtUserName" ng-model="user.UserName" name="user.UserName" />
</div>
<div>
<label>Password</label>
<input type="text" id="txtPassword" ng-model="user.Password" name="user.Password" />
</div>
<div>
<input type="submit" id="btnLogin" title="Save" name="btnLogin" value="Login" />
</div>
</form>
My angular code
var demoApp = angular.module('demoApp', []);
demoApp.controller("homeController", ["$scope", "$timeout", function ($scope, $timeout) {
$scope.loginUser = function () {
var form = document.getElementById("loginform");
//var form = $scope.loginform; - tried this here...
//var form = $scope["#loginform"]; tried this
//var form = angular.element(event.target); - tried this...
// tried a lot of other combinations as well...
form.attr("method", "post");
form.attr("action", "Home/Index");
form.append("UserName", $scope.user.UserName);
form.append("Password", $scope.user.Password);
form.append("RememberMe", false);
form.submit();
};
}]);
I keep on getting error 'attr' is not a function.
All I need is submit a form using post method, with values. Just before that I am trying to intercept the submit call and check for validations.
I am open to try any other approach as well. Such as changing the input type from submit to button. Putting the input outside the form. I would be more than happy if validations and submit both can happen any which way. I just want it to post back the values after validating on the client side and then the server will take care of the redirect.
Note: I want the form to do a full postback so that I can get it to redirect to another form. (I know I could use Ajax, but some other day, may be!)
1st of all avoid doing var form = document.getElementById("loginform");. Instead of using form.submit you can use the following code. Do it the angular way cheers :D
$scope.loginUser = function () {
if($scope.loginform.$valid){
user.rememberme=false;
$http({
url: 'Home/Index',
method: "POST",
data: user
})
.then(function(response) {
// success
},
function(response) { // optional
// failed
});
}
};
this is a code to validation if validation not complate button is not enable
<form method="post" id="loginform" name="loginform" ng-submit="loginUser()" novalidate>
<div>
{{message}}
</div>
<div>
<label>User Name</label>
<input type="text" id="txtUserName" required ng-model="user.UserName" name="UserName" />
</div>
<div>
<label>Password</label>
<input type="text" id="txtPassword" ng-model="Password" name="user.Password"required />
</div>
<div>
<input type="submit" ng-disabled="myForm.UserName.$invalid || myForm.Password.$invalid" id="btnLogin" title="Save" name="btnLogin" value="Login" />
</div>
</form>
You should use $scope when trying to access the form, something like $scope.loginform. But......
Take a look at ng-messages. Heres an example using ng-messages with your form:
<form id="loginform" name="loginform" ng-submit="loginUser()">
<div>
{{message}}
</div>
<div>
<label>User Name</label>
<input type="text" id="txtUserName" ng-model="user.UserName" name="user.UserName" required/>
<div class="help-block" ng-messages="loginform.txtUserName.$error" ng-show="loginform.txtUserName.$touched">
<p ng-message="required">Username is required.</p>
</div>
</div>
<div>
<label>Password</label>
<input type="text" id="txtPassword" ng-model="user.Password" name="user.Password" required/>
<div class="help-block" ng-messages="loginform.txtPassword.$error" ng-show="loginform.txtPassword.$touched">
<p ng-message="required">Password is required.</p>
</div>
</div>
<div>
<input type="submit" id="btnLogin" title="Save" name="btnLogin" value="Login" ng-click="loginUser()" />
</div>
</form>
Add ngMessages:
var demoApp = angular.module('demoApp', ['ngMessages']);
demoApp.controller("homeController", ["$scope", "$timeout", function ($scope, $timeout) {
$scope.loginUser = function () {
if($scope.loginform.$valid){
//Code to run before submitting (but not validation checks)
} else{
return false;
}
};
}]);
Don't forget to include ngMessages in your app declaration and include the ngMessages.js script file. Note how you can simply use HTML5 validators.
I found the thing I was looking for. In the end I had to create a directive for validating and then submitting. So I am posting it here as a whole answer.
My HTML
<div ng-controller="homeController" ng-init="construct()">
<form method="post" action="Index" role="form" id="loginform" name="loginform" ng-form-commit novalidate class="ng-pristine ng-invalid ng-invalid-required">
<div class="form-group">
<label for="UserName">User ID</label>
<input autocomplete="off" class="form-control ng-valid ng-touched ng-pristine ng-untouched ng-not-empty"
id="UserName" name="UserName" ng-model="user.UserName" type="text" value=""
ng-change="userNameValidation = user.UserName.length == 0">
<span class="field-validation-error text-danger" ng-show="userNameValidation">The User ID field is required.</span>
</div>
<div class="form-group">
<label for="Password">Password</label>
<input autocomplete="off" class="form-control ng-valid ng-touched ng-pristine ng-untouched ng-not-empty"
id="Password" name="Password" ng-model="user.Password" type="password" value=""
ng-change="passwordValidation = user.Password.length == 0">
<span class="field-validation-error text-danger" ng-show="passwordValidation">The Password field is required.</span>
</div>
<div>
<input type="button" id="btnLogin" title="Login" name="btnLogin" value="Login" ng-click="validateUser(loginform)" />
</div>
</form>
</div>
Look for ng-form-commit on the form element. It is the directive that I created.
My Angular code
var demoApp = angular.module('demoApp', []);
demoApp.factory("commonService", function () {
return {
isNullOrEmptyOrUndefined: function (value) {
return !value;
}
};
});
//This is the directive that helps posting the form back...
demoApp.directive("ngFormCommit", [function () {
return {
require: "form",
link: function ($scope, $el, $attr, $form) {
$form.commit = function () {
$el[0].submit();
};
}
};
}]);
demoApp.controller("homeController", ["$scope", "commonService", function ($scope, commonService) {
$scope.construct = function construct() {
$scope.user = { UserName: "", Password: "" };
};
$scope.userNameValidation = false;
$scope.passwordValidation = false;
$scope.isFormValid = false;
$scope.validateUser = function ($form) {
$scope.isFormValid = true;
$scope.userNameValidation = commonService.isNullOrEmptyOrUndefined($scope.user.UserName);
$scope.passwordValidation = commonService.isNullOrEmptyOrUndefined($scope.user.Password);
$scope.isFormValid = !($scope.userNameValidation || $scope.passwordValidation);
if ($scope.isFormValid === true) {
$scope.loginUser($form);
}
};
$scope.loginUser = function ($form) {
$form.commit();
};
}]);
I found the directive here
Example using Angular 1.5 components.
(function(angular) {
'use strict';
function DemoFormCtrl($timeout, $sce) {
var ctrl = this;
this.$onInit = function() {
this.url = $sce.trustAsResourceUrl(this.url);
/*$timeout(function() {
ctrl.form.$$element[0].submit();
});*/
};
this.validate = function(ev) {
console.log('Running validation.');
if (!this.form) {
return false;
}
};
}
angular.module('app', [])
.component('demoForm', {
template: `
<p>To run this demo allow pop-ups from https://plnkr.co</p>
<hr>
<p>AngularJS - submit form programmatically after validation</p>
<form name="$ctrl.form" method="get" target="blank" action="{{::$ctrl.url}}" novalidate
ng-submit="$ctrl.validate($event)">
<input type='hidden' name='q' ng-value='::$ctrl.value'>
<input type='hidden' name='oq' ng-value='::$ctrl.value'>
<input type="submit" value="submit...">
</form>`,
controller: DemoFormCtrl,
bindings: {
url: '<',
value: '<'
}
});
})(window.angular);
https://plnkr.co/edit/rrruj6vlWrxpN3od9YAj?p=preview
So, what the problem. I have two input fields newPassword and oldPassword. I want to check if these two fields are equals show the error message.
Form looks like:
<form name="passwordForm" ng-submit="submitPasswordForm()" modelAttribute="userPasswordChange" novalidate>
<div class="row">
<input path="oldPassword" type="password" id="oldPassword" name="oldPassword" placeholder="Old Password" ng-model="user.oldPassword" minlength="5" maxlength="128" required/>
<br>
<span ng-show="passwordForm.oldPassword.$dirty && passwordForm.oldPassword.$error.required">Old Password field can not be empty. Please check it and try again.</span>
<span ng-show="passwordForm.oldPassword.$error.minlength || passwordForm.oldPassword.$error.maxlength">Old password field size must be between 5 and 128</span>
</div>
<div class="row">
<input path="newPassword" type="password" id="newPassword" name="newPassword" placeholder="New Password" ng-model="user.newPassword" minlength="5" maxlength="128" required diff-values="oldPassword"/>
<br>
<span ng-show="passwordForm.newPassword.$dirty && passwordForm.newPassword.$error.required">New Password field can not be empty. Please check it and try again.</span>
<span ng-show="passwordForm.newPassword.$error.minlength || passwordForm.oldPassword.$error.maxlength">New Password field size must be between 5 and 128</span>
<span ng-show="passwordForm.newPassword.$dirty && passwordForm.newPassword.$error.differentValues">New Password and Old Password fields must have different values.</span>
</div>
<div class="row">
<input path="confirmPassword" type="password" id="confirmPassword" name="confirmPassword" placeholder="Confirm password" ng-model="user.confirmPassword" minlength="5" maxlength="128" same required/>
<br>
<span ng-show="passwordForm.confirmPassword.$dirty && passwordForm.confirmPassword.$error.required">Confirm password field can not be empty. Please check it and try again.</span>
<span ng-show="passwordForm.confirmPassword.$error.minlength || passwordForm.oldPassword.$error.maxlength">Confirm password field size must be between 5 and 128</span>
</div>
<div class="row">
<input id="save" type="submit" value="Save" class="btn btn-primary" onsubmit="submitPasswordForm()"
ng-disabled="passwordForm.oldPassword.$dirty && passwordForm.oldPassword.$invalid
|| passwordForm.newPassword.$dirty && passwordForm.newPassword.$invalid
|| passwordForm.confirmPassword.$dirty && passwordForm.confirmPassword.$invalid"/>
</div>
</form>
So if I have understood right, I have to create my own directive. So I realized it in this way:
var postPasswordForm = angular.module('postPasswordForm', []);
postPasswordForm.directive('diffValues', function () {
return {
restrict: "A",
link: function (scope, elem, attr, ctrl) {
ctrl.$parsers.push(function (value) {
var compareWith = document.getElementById(attr.diffValues).value;
var currentVar = value;
ctrl.$setValidity('differentValues', compareWith !== currentVar);
console.log(scope);
return value;
});
}
};
});
The problem is that for this task I also need to observe when old password change, and according to expression show\hide this span:
<span ng-show="passwordForm.newPassword.$dirty && passwordForm.newPassword.$error.differentValues">New Password and Old Password fields must have different values.</span>
and of course change this value
passwordForm.newPassword.$error.differentValues:
Can someone help me and explain how to do that in the right way? I will appreciate any idea, explanations, and links.
Thanks in advance.
I have solved that in a next way:
<form name="passwordForm" ng-submit="submitPasswordForm()" modelAttribute="userPasswordChange" novalidate>
<div class="row">
<input path="oldPassword" type="password" id="oldPassword" name="oldPassword" placeholder="Old Password" ng-model="user.oldPassword" minlength="5" maxlength="128" required/>
<br>
<span ng-show="passwordForm.oldPassword.$dirty && passwordForm.oldPassword.$error.required">Old Password field can not be empty. Please check it and try again.</span>
<span ng-show="passwordForm.oldPassword.$error.minlength || passwordForm.oldPassword.$error.maxlength">Old password field size must be between 5 and 128</span>
</div>
<div class="row">
<input path="newPassword" type="password" id="newPassword" name="newPassword" placeholder="New Password" ng-model="user.newPassword" minlength="5" maxlength="128" required diff-values="user.oldPassword"/>
<br>
<span ng-show="passwordForm.newPassword.$dirty && passwordForm.newPassword.$error.required">New Password field can not be empty. Please check it and try again.</span>
<span ng-show="passwordForm.newPassword.$error.minlength || passwordForm.oldPassword.$error.maxlength">New Password field size must be between 5 and 128</span>
**CHANGED HERE:**<span ng-show="passwordForm.newPassword.$dirty && passwordForm.newPassword.$error.differentValues">New Password field must be different from the Old Password field.</span>
</div>
<div class="row">
<input path="confirmPassword" type="password" id="confirmPassword" name="confirmPassword" placeholder="Confirm password" ng-model="user.confirmPassword" minlength="5" maxlength="128" same required/>
<br>
<span ng-show="passwordForm.confirmPassword.$dirty && passwordForm.confirmPassword.$error.required">Confirm password field can not be empty. Please check it and try again.</span>
<span ng-show="passwordForm.confirmPassword.$error.minlength || passwordForm.oldPassword.$error.maxlength">Confirm password field size must be between 5 and 128</span>
</div>
<div class="row">
<input id="save" type="submit" value="Save" class="btn btn-primary" onsubmit="submitPasswordForm()"
ng-disabled="passwordForm.oldPassword.$dirty && passwordForm.oldPassword.$invalid
|| passwordForm.newPassword.$dirty && passwordForm.newPassword.$invalid
|| passwordForm.confirmPassword.$dirty && passwordForm.confirmPassword.$invalid"/>
</div>
</form>
And directive function changed to this one:
postPasswordForm.directive('diffValues', function () {
return {
restrict: "A",
require: 'ngModel',
scope: {
otherModelValue: "=diffValues"
},
link: function (scope, elem, attr, ctrl) {
ctrl.$validators.diffValues = function (modelValue) {
ctrl.$setValidity('differentValues', modelValue !== scope.otherModelValue);
};
scope.$watch("otherModelValue", function () {
ctrl.$validate();
});
}
};
});
I started to use angular yesterday first time, so sorry if ask some simple things. And as I understood this one it is not the better solutions because from the documentation I can read that $validate() - invoke all validators from the $validators collection. But I need to run just one of them. Can I do that somehow? Or this solution is OK?
I'm having trouble with this simple form: My lack of javascript is holding me back!
If anyone can give me some pointers: I have been unable to find documentation (non-php), which I understand, and gives a full overview of connecting the form data to the '$http' service.
(I'm not getting errors however the data is not registering with the server.)
data format:
{"item_name":"Contact Me Form", "item_data":{"Name":"John Smith", "Email":"john#smith.com", "PhoneNumber":"222-333-4444"}}
script:
angular.module('formApp', [])
.controller('FormController', ['$scope', '$http', function($scope, $http) {
$scope.form_data = {};
$scope.update = function(user) {
$scope.form_data = angular.copy(user);
var dataObject = {
item_name : "Contact Me Form"
,item_data : $scope.form_data
};
var responsePromise = $http.post("http://server-url", dataObject, {});
responsePromise.success(function(dataFromServer, status, headers, config)
{
var outputDate=angular.fromJson(dataFromServer);
});
responsePromise.error(function(data, status, headers, config) {
console.log("Error in fetching user store call!");
});
};
}]);
<div ng-app="formApp">
<div ng-controller="FormController">
<form novalidate class="animated" >
<input
type="text"
ng-model="user.Name"
class="form-control"
id="Name"
placeholder="Your Name" required /><br />
<input
type="email"
ng-model="user.Email"
class="form-control "
id="Email"
placeholder="Company Email" required/><br />
<input
type="text" ng-model="user.PhoneNumber"
class="form-control "
id="Number"
placeholder="Phone - (optional)" /><br />
<input
id="submit"
class="btn-default btn-lg " type="submit"
ng-click="update(user)"
value="Save"
/>
</form>
</div>
</div>
Im trying to post input data with angular, but I don't know how to grab the data from the input fields.
Here is my HTML:
<div ng-controller="Test">
<div class="container">
<div class="col-sm-9 col-sm-offset-2">
<div class="page-header"><h1>Testar</h1></div>
<form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate> <!-- novalidate prevents HTML5 validation since we will be validating ourselves -->
<div class="form-group" ng-class="{'has-error' : userForm.name.$invalid && !userForm.name.$pristine, 'has-success' : userForm.name.$valid }">
<label>Name</label>
<input type="text" name="name" class="form-control" ng-model="name" required>
<p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">Fel namn</p>
</div>
<div class="form-group" ng-class="{'has-error' : userForm.username.$invalid && !userForm.username.$pristine, 'has-success' : userForm.username.$valid && !userForm.username.$pristine}">
<label>Username</label>
<input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8">
<p ng-show="userForm.username.$error.minlength" class="help-block">För kort</p>
<p ng-show="userForm.username.$error.maxlength" class="help-block">För långt</p>
</div>
<div class="form-group" ng-class="{'has-error' : userForm.email.$invalid && !userForm.email.$pristine, 'has-success' : userForm.email.$valid && !userForm.email.$pristine}">
<label>Email</label>
<input type="email" name="email" class="form-control" ng-model="email">
<p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Ange korrekt e-post</p>
</div>
<button type="submit" class="btn btn-primary">Lägg till</button>
</form>
</div>
</div>
</div>
Here is my controller:
as.controller('Test', function($scope, $http, $rootScope)
{
$scope.submitForm = function(isValid) {
if(isValid)
{
$http.post($rootScope.appUrl + '/nao/test', {"data": $scope.userForm})
.success(function(data, status, headers, config) {
console.log(data);
}).error(function(data, status) {
});
}
};
});
A post is made when I hit the button, but the data that Is being sent looks like this:
{"data":{"name":{},"username":{},"email":{}}}
How can I take the data from all the input fields? Should I refer to userForm as I do in the controller?
I suggest to create one more $scope object - at beginning it will be empty:
$scope.form = {};
Every field will be a part of this object:
<input type="text" name="name" class="form-control" ng-model="form.name" required>
After send all fields you will have in object $scope.form.
jsFiddle: http://jsfiddle.net/krzysztof_safjanowski/QjNd6/
you have ng-model variables in scope:
$scope.name
$scope.user.username
$scope.email
you can all of these prefix with user. and then send with ajax $scope.user instead of $scope.userForm
or
try to send object which is copied by: angular.copy($scope.userForm)
You can have a property in your scope, say user. Have all your ng-model values be user.SOMETHING. This way you can easily send the $scope.user holding all the data, as in {data: $scope.user }.
Currently, I am using a server side framework CakePHP to build my app.
I need to integrate angular into my app.
Currently, I send the following inputs
User.old_password, User.new_password, User.new_password_confirm
to this url /mypasswords/new using POST
This works just fine.
I understand that to send data to server side I need to use services in Angular.
This is my Angular code so far.
var app = angular.module("myApp", []);
app.controller('passwordController', ['$scope', function($scope) {
$scope.submitted = false;
$scope.changePasswordForm = function() {
if ($scope.change_password_form.$valid) {
// Submit as normal
} else {
$scope.change_password_form.submitted = true;
}
}
}]);
services = angular.module('myApp.services', ['ngResource']);
services.factory("UserService", function($http, $q) {
var service;
// service code here
});
So what do I write in the //service code here part? What other parts am I missing?
My form currently looks like this as html after being rendered. (I know I probably have to remove action and method attributes from my form. Do I?)
<form action="/mypasswords/new" id="change_password_form" name="change_password_form" ng-controller="passwordController" ng-submit="changePasswordForm()" method="post" accept-charset="utf-8" class="ng-scope ng-pristine ng-valid">
<div style="display:none;"><input type="hidden" name="_method" value="POST"></div>
<input name="data[User][old_password]" id="u56" placeholder="Enter old password..." class="u56 profile_input" type="password">
<input name="data[User][new_password]" id="u57" placeholder="Enter new password..." class="u57 profile_input" type="password">
<input name="data[User][new_password_confirm]" id="u58" placeholder="Enter new password..." class="u58 profile_input" type="password">
<div id="u25" class="u25_container">
<div id="u25_img" class="clear_all_button detectCanvas" onclick="document.getElementById('change_password_form').reset()">
</div>
</div>
<div id="u27" class="u27_container">
<input id="u27_img" class="submit_button detectCanvas" type="submit" value="SAVE">
</div>
</form>
Thank you.
if you want just to send the form with ajax, No need to create factory, just do it in controller like this:
var app = angular.module("myApp", [$http]);
app.controller('passwordController', ['$scope', function($scope) {
$scope.submitted = false;
$scope.changePasswordForm = function() {
if ($scope.change_password_form.$valid) {
//note: use full url, not partial....
$http.post('http://myweb.com/mypasswords/new', change_password_form.Data)
.success(function(data, status, headers, config) {
//do anything when it success..
})
.error(function(data, status, headers, config){
//do anything when errors...
});
} else {
$scope.change_password_form.submitted = true;
}
}
}]);
And your form will looks like this:
<form id="change_password_form" name="change_password_form" ng-controller="passwordController" ng-submit="changePasswordForm()" method="post" accept-charset="utf-8" class="ng-scope ng-pristine ng-valid">
<div style="display:none;"><input type="hidden" name="_method" value="POST"></div>
<input name="data[User][old_password]" ng-model="Data.old_password" id="u56" placeholder="Enter old password..." class="u56 profile_input" type="password">
<input name="data[User][new_password]" ng-model="Data.new_password" id="u57" placeholder="Enter new password..." class="u57 profile_input" type="password">
<input name="data[User][new_password_confirm]" ng-model="Data.new_password_confirm" id="u58" placeholder="Enter new password..." class="u58 profile_input" type="password">
<div id="u25" class="u25_container">
<div id="u25_img" class="clear_all_button detectCanvas" onclick="document.getElementById('change_password_form').reset()">
</div>
</div>
<div id="u27" class="u27_container">
<input id="u27_img" class="submit_button detectCanvas" type="submit" value="SAVE">
</div>
</form>
Step 1: write form using normal html instead of FormHelper in CakePHP
The form should look like this:
<form name="change_password_form" ng-controller="passwordController"
ng-submit="changePasswordForm()">
<input name="data[User][old_password]" ng-model="data.User.old_password" type="password" placeholder="Enter old password..." class="u56 profile_input">
<input name="data[User][new_password]" ng-model="data.User.new_password" type="password" placeholder="Enter new password..." class="u57 profile_input">
<input name="data[User][new_password_confirm]" ng-model="data.User.new_password_confirm" type="password" placeholder="Enter new password again..." class="u58 profile_input">
<div id="u25"
class="u25_container">
<div id="u25_img"
class="clear_all_button detectCanvas" onclick="document.getElementById('change_password_form').reset()">
</div>
</div>
<div id="u27"
class="u27_container">
<button type="submit" id="u27_img" ng-click="debug()"
class="submit_button detectCanvas" />
</div>
</form>
Step 2: write the app.js in the following manner.
the X-Requested-With header is important if you want to use the CakePHP $this->request->is('ajax')
angular.module("myApp", [])
.controller('passwordController', function($scope, $http) {
$scope.changePasswordForm = function() {
console.log('change passwrd form activated');
//note: use full url, not partial....
$http({
method : 'POST',
url : '/mypasswords/new',
data : $.param($scope.data), // pass in data as strings
headers : { 'Content-Type': 'application/x-www-form-urlencoded',
'X-Requested-With' : 'XMLHttpRequest'
} // set the headers so angular passing info as form data (not request payload)
})
.success(function(data, status, headers, config) {
//do anything when it success..
console.log('works!');
})
.error(function(data, status, headers, config){
//do anything when errors...
console.log('errors!');
});
}
$scope.debug = function () {
console.log($scope);
}
});