A RESTAPI has been created and now I want to update usersettings
The Controller
$scope.updateUser = function() {
//$scope._id = result.data._id; //+ $scope._id
$http.put(API_ENDPOINT.url + '/users/' + $scope._id, $scope.user).success(function(response) {
})};
The view:`
<label class="item item-input">
<input type="text" placeholder="Name" ng-model="user.name">
</label>
<label class="item item-input">
<input type="password" placeholder="Password" ng-model="user.password">
</label>
</div>
<button class="button button-full button-positive" ng-click="updateUser()">
Save
</button>`
When a user is logged on and want to correct user profile, what is the correct approach writing this put function?
Right now when trying to change the name the terminal gives this:
http://prntscr.com/dac1d1
and nothing has been changed?
Related
This question already has answers here:
Resetting form after submit in Angularjs
(5 answers)
Closed 4 years ago.
When i am click add button for add records in next time then last form data is present in form it is not clear in bootstrap form model.
$scope.saveAdd = function () {
$http({
method: 'post',
url: 'user/insert',
data: $scope.form,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).success(function (data)
{
if (data == 1) {
$scope.user_succ = $scope.user_succ ? false : true;
$scope.succ = "User added successfully";
$timeout(function () {
$(".modal").modal("hide");
}, 3000);
} else if(data == 3) {
$scope.confirm_password=$scope.confirm_password ? false :true;
$scope.confirm_password_error="Confirm Password is Not Matched";
}else{
$scope.user_err = $scope.user_err ? false : true;
$scope.err = "User insertion failed! Try again.";
}
});
};
My View page:-
This is my view page that is load from angularjs routes.js.If you found any error error please give me some feedback.or any others angularjs validation you have please share with me.
<form method="POST" name="addItem" role="form" ng-submit="saveAdd()">
<div class="modal-body">
<div class="form-group">
<label for="name" class="col-form-label">Name<span class="text-danger">*</span></label>
<input type="text" class="form-control" ng-model="form.name" id="name" name="name" placeholder="Enter Name" required>
<span style="color:red" ng-show="addItem.name.$touched && addItem.name.$invalid">Please Enter User Name.</span>
</div>
<div class="form-group">
<label for="phone" class="col-form-label">Phone Number<span class="text-danger">*</span></label>
<input type="text" class="form-control" ng-model="form.phone" id="phone" name="phone" placeholder="Enter Phone Number" required="">
<span style="color:red" ng-show="addItem.phone.$touched && addItem.phone.$invalid">Please Enter Phone Number.</span>
</div>
<div class="form-group">
<label for="usertype" class="col-form-label">User Type<span class="text-danger">*</span></label>
<select class="form-control" ng-model="form.type" id="type" name="type" required="">
<option value="">Select a user type</option>
<option value="branch">Branch Admin</option>
<option value="manager">Branch Manager</option>
</select>
<span style="color:red" ng-show="addItem.type.$touched && addItem.type.$invalid">Select User Type.</span>
</div>
<div class="form-group">
<label for="address" class="col-form-label">Address</label>
<textarea class="form-control" ng-model="form.address" id="address" name="address" placeholder="Enter Address" required=""></textarea>
<span style="color:red" ng-show="addItem.address.$touched && addItem.address.$invalid">Please Enter Address.</span>
</div>
<div class="form-group">
<label for="username" class="col-form-label">Username<span class="text-danger">*</span></label>
<input type="text" class="form-control" ng-model="form.username" id="username" name="username" placeholder="Enter Username" required="">
<span style="color:red" ng-show="addItem.username.$touched && addItem.username.$invalid">Please Enter Username.</span>
</div>
<div class="form-group">
<label for="password" class="col-form-label">Password<span class="text-danger">*</span></label>
<input type="password" class="form-control" ng-model="form.password" placeholder="Password" name="password" required="required" ng-minlength="6"/>
<div ng-if="addItem.password.$touched || signupSubmitted">
<p style="color:red" ng-show="addItem.password.$error.required" class="help-block">Password is required</p>
<p style="color:red" ng-show="addItem.password.$error.minlength" class="help-block">Minimum 6 character</p>
</div>
</div>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Confirm Password<span class="text-danger">*</span></label>
<input type="password" class="form-control" name="confirm_password" ng-model="form.confirm_password" placeholder="Confirm password" match-password="password" required>
<div ng-if="addItem.confirm_password.$touched || signupSubmitted">
<p style="color:red" ng-show="addItem.confirm_password.$error.required" class="help-block">Confirm password is required</p>
<p style="color:red" ng-show="confirm_password" >{{confirm_password_error}}</p>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" >Submit</button>
</div>
</form>`
You can try reset function which reset your form fields. But this is not the accurate solution. Please provide your Complete controller and HTML code to make an accurate solution.
$scope.resetForm = function(){
/* reset the data to a new object so that all the properties
* of form are reset
*/
$scope.data = {};
};
UPDATE
Based on the partial HTML code, you can try form controller API setPristine: $scope.FORMNAME.$setPristine();
Replace FORMNAME with your form name. Also make note that as your form is binding a model object to your inputs so, you need to take care of clearing those input model as well:
$scope.formData = {};
Hope this will help to solve your point :)
The reason is that your previous value that you bind with model is still there. So, you can do either of 2 things:
Inject $route in controller and do $route.reload() on ng-submit and the route is reloaded.
Reinitialize the model by creating and calling a function which clears the data.Use $scope.formName.$setPristine() if you have validation depending on this pristine state of form
NOTE: $route.reload() will reload your route, so all the changes which have in your controller will be reverted. So choose accordingly.
Its Work.With Minor Change.
$scope.form = {}; // clears input fields
$scope.NameofFormSubmitted.$setPristine();
$scope.NameofFormSubmitted.$setUntouched();
I think what you are looking for is:
$scope.form = {}; // clears input fields
$scope.NameofFormSubmitted.$setPristine();
$scope.NameofFormSubmitted.$setUntouched(); // resets touch events
This is my signup.html file i want to take only password and username from this form to my controller.but I not able to access form elements through this !
<ion-view view-title="Sign Up">
<ion-content ng-controller="signup">
<div class="figure_img">
<img src="img/logo_image.png">
</div>
<form name="myForm">
<div class="list">
<label class="item item-input">
<input type="text" placeholder="Email ID" id="email" name="email" ng-model="formData.email"
required>
<span ng-show="myForm.email.$error.required && myForm.email.$dirty">required</span>
<span ng-show="!myForm.email.$error.required && myForm.email.$error.email && myForm.email.$dirty">invalid email</span>
</label>
<label class="item item-input">
<input type="password" placeholder="Password" id="password" name="password"
ng-model="formData.password" required>
<span ng-show="myForm.password.$error.required && myForm.password.$dirty">required</span>
</label>
<label class="item item-input">
<input type="password" placeholder="Confirm Password" id="password_c" name="password_c" ng-model="formData.password_c" valid-password-c required>
<span ng-show="myForm.password_c.$error.required && myForm.password_c.$dirty">Please confirm your password.</span>
<span ng-show="!myForm.password_c.$error.required && myForm.password_c.$error.noMatch && myForm.password.$dirty">Passwords do not match.</span>
</label>
<div class="contain-body">
<button class="button button-block button-positive" ng-click="signup(myForm)">SignUp</button>
</div>
</div>
</form>
</ion-content>
</ion-view>
this is my controller for signup
app.controller("signup", function ($scope,$http,$ionicPopup,URL,$ionicLoading,$timeout,$state) {
$scope.data = {
email :'',
password :''
};
$scope.signup = function (data) {
console.log(data);
$http.post(URL.url + '/registration',data)
.success(function () {
$ionicLoading.show({template:'<ion-spinner class="spinner-energized"></ion-spinner>Complete your Registration through Email'});
$timeout(function () {
$ionicLoading.hide();
$ionicHistory.clearCache().then(function() {
$state.go('EmailLogin') ;
});
},5000);
}).error(function (response) {
$ionicPopup.alert({
title: 'Sign-Up failed!',
template:response.errors.email
});
});
}
});
how could i take only password and username in my controller ..
so that it gets easy to signup !
You are actually passing the form controller to your signup method. This is not what you want.
You already got access to your email and password field values through formData.email and formData.password in your view, so you can adjust the call to the signup by including formData as suggested in the comments.
But as you declare $scope.data is your controller, you might want to reuse those instead of formData in your ng-model directive of the view, because currently this data object does not seem to be used.
Create an object in the function using the data you received. Just do something like var reqData = { email: data.email, password: data.password }; and then do $http.post(URL.url + '/registration',reqData).
Hope it helps.
I have two text box for username and password, when each user enter data it should send to api. how can i make it work.
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text" ng-model="loginData.username">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password" ng-model="loginData.password">
</label>
<p style="text-align:center"ng-hide=myflag>wrong credentials</P>
<label class="item">
<button class="button button-block button-positive" type="submit">Log in</button>
</label>
You should read through the angular documentation for forms.
https://docs.angularjs.org/guide/forms
Here's a quick example of a template + controller.
html
<form action="submitLogin()">
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text" ng-model="loginData.username">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password" ng-model="loginData.password">
</label>
<p style="text-align:center"ng-hide=myflag>wrong credentials</P>
<label class="item">
<button class="button button-block button-positive" type="submit">Log in</button>
</label>
</form>
controller
var example_app = angular.module("example_app ", []);
example_app.controller("LoginController", ['$scope', '$http', function($scope, $http) {
$scope.loginData = {};
$scope.submitLogin= function(){
var res = $http.post('http://login.com/postLogin', loginData);
res.success(function(data, status, headers, config) {
$scope.message = data;
// go to authorized page
});
res.error(function(data, status, headers, config) {
alert( "failure message: " + JSON.stringify({data: data}));
});
};
}]);
Documentation doesn't show the action= functionality, but shows a ng-click on the submit button instead. Both work fine.
Edit:
Was going to mention, but forgot to, that you should try to use angular services for instead of using $http directly in your controller.
https://docs.angularjs.org/guide/services
https://github.com/johnpapa/angular-styleguide
I have 4 fields in a form firstname,lastname,email,phone
when i start typing on email and phone field the form gets stuck in Google chrome browser(keyboard typing and mouse click on form section stops working but outside form everything eg:tabs are working), but when i try with Firefox there is no problem.
I tried in Google chrome by removing firstname field now the error occurs only in phone field. likewise when i remove lastname field there was no error.
In general only the first 2 fields are working 3rd field onwards its showing error.
How can i sole this issue.
.controller('AccountCtrl', function($scope) {
$scope.usr = {"firstname":"","lastname":"","umail":"","uphone":"","location":["",""]};
if(localStorage.getItem('appusr')!==null){
$scope.usr = JSON.parse(localStorage.getItem('appusr'));
console.log($scope.usr);
}
$scope.saveUserDetails = function(){
if($scope.usr.location[0]==""){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position){
$scope.$apply(function(){
$scope.usr.location = [position.coords.latitude,position.coords.longitude];
});
});
}
}
console.log($scope.usr);
localStorage.setItem("appusr",JSON.stringify($scope.usr));
}
});
<form ng-submit="saveUserDetails()" name="form" validate>
<div class="list">
<label class="item item-input item-stacked-label">
<span class="input-label">First Name</span>
<input type="text" ng-model="usr.firstname" placeholder="John">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Last Name</span>
<input type="text" ng-model="usr.lastname" placeholder="Suhr">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Email</span>{{usr.email}}
<input type="email" ng-model="usr.umail" name="umail" placeholder="john#suhr.com">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Phone</span>
<input type="text" ng-model="usr.uphone" placeholder="9999999999">
</label>
<button type="submit" class="button button-full button-positive"><i class="icon ion-person-add"></i> Update </button>
</div>
</form>
I used an AngularJS 1.2 application with a classic log-in/log-out function, ant it worked well.
When I log out, I make some basic operations then a redirection to log-in page ($state.go('app.login');)
However, the login page is loaded with the username and password already filled, which is pretty annoying :) It didn't occur with AngularJS 1.2.
Here is the login form:
<form name="LoginForm"
autocomplete="off"
ng-submit="validate_login(email, password)">
<div class="list">
<label class="item item-input my-item">
<input name="email"
ng-model="email"
type="email"
required
placeholder="E-mail">
</label>
<label class="item item-input my-item">
<input name="password"
ng-model="password"
type="password"
required
placeholder="Mot de passe">
</label>
</div>
<button class="button" type="submit">
Connexion
</button>
</form>
Here is the content of the log out controller:
$scope.logout_user = function() {
Auth.clearCredentials();
$state.go('app.login');
}
Thanks.