Update page after form submit - using Angular - javascript

I am using the MEAN framework - I have a basic form (as per below) that when data is entered it is sent to a rest API which then has a function that uses Mongoose to save data. That is all good... however i'm stuck on something more basic!
After a user has submitted this form it lands on a blank page with the api/img/add, how do i go back to my original page? I tried adding ng-submit="fetchImages()" within the form tag and then implementing a function in a script (also shown below) but for some reason this was not working, am i missing the point and doing something really wrong?
Thanks in advance
<form action="api/img/add" method="post" enctype="multipart/form-data">
<div>
<label for="image">Select an image</label>
<input type="file" name="image" id="image">
</div>
<div>
<label for="title">Title</label>
<input type="text" name="title" id="title">
</div>
<input type="submit">
</form>
< script >
angular.module('app', []).controller('main', ['$scope', '$http',
function($scope, $http) {
$scope.images = [];
$scope.fetchImages = function() {
$scope.images = [];
$http.get('api/img').then(function(res) {
$scope.images = JSON.parse(res.data);
}, function(res) {
console.log(res.statusText);
});
}
$scope.fetchImages();
}
]); < /script>

If you literally want to go back to the last page, you could use:
$window.history.back();
In your example, I would create the function in the controller as outlined below, and change
<input type="submit">
to
<input type="submit" ng-click="goHome()">
I created an über-simple plunk here with a button that will take you back:
https://plnkr.co/edit/wzMlPF9kOmrGg01mOnBB?p=preview
JS
app.controller('ctrl',function($scope,$window){
$scope.goHome = function() {
$window.history.back();
}
});
HTML
<button ng-click="goHome()">Go Home</button>

Try this:
In html
<form ng-submit="submitData()">
<div>
<label for="image">Select an image</label>
<input type="file" ng-model="formdata.image" id="image">
</div>
<div>
<label for="title">Title</label>
<input type="text" ng-model="formdata.title" id="title">
</div>
<input type="submit">
</form>
In your controller:
angular.module('app', []).controller('main', ['$scope', '$http',
function($scope, $http) {
$scope.formdata = {};
$scope.images = [];
$scope.fetchImages = function() {
$scope.images = [];
$http.get('api/img').then(function(res) {
$scope.images = JSON.parse(res.data);
}, function(res) {
console.log(res.statusText);
});
}
$scope.fetchImages();
//this function will post data to your api without refreshing the page
$scope.submitData = function(){
$http.post('api-comes-here', $scope.formdata).then(function(res) {
//handle success
}, function(error) {
//handle error
});
}
}

Related

Getting a 405 (Method Not Allowed) in AngularJS

So, I am creating a web app, where one page I have a user list and on the second page, I have the users details page. On the second page, I have a confirm button where I want to remove that user when the "Confirm" button is clicked with a 200 Status code. However, I am getting a DELETE : 405 (Method Not Allowed). So, here is my code down below. Please tell me or help me fix this problem. Thank you in advance.
Here is my code.
<div ng-controller="MyCtrl">
<div ng-repeat="person in userInfo.lawyers | filter : {id: lawyerId}">
<a class="back" href="#/lawyer">Back</a>
<button type="button" class="edit" ng-show="inactive" ng-click="inactive = !inactive">
Edit
</button>
<button type="submit" class="submit" ng-show="!inactive" ng-click="inactive = !inactive">Save</button>
<button class="btn btn-primary" ng-click="doDelete(id)">Confirm</button>
<div class="people-view">
<h2 class="name">{{person.firstName}}</h2>
<h2 class="name">{{person.lastName}}</h2>
<span class="title">{{person.email}}</span>
<span class="date">{{person.website}} </span>
</div>
<div class="list-view">
<form>
<fieldset ng-disabled="inactive">
<legend>Basic Info</legend>
<b>First Name:</b>
<input type="text" ng-model="person.firstName">
<br>
<b>Last Name:</b>
<input type="text" ng-model="person.lastName">
<br>
<b>Email:</b>
<input type="email" ng-model="person.email">
</fieldset>
</form>
</div>
</div>
</div>
Services
app.factory('people', function ($http) {
var service = {};
service.getUserInfo = function () {
return $http.get('https://api-dev.mysite.io/admin/v1/unconfirmed_lawyers');
};
service.confirmUser = function (lawyerId) {
return $http.put('https://api-dev.mysite.io/admin/v1/lawyers/{lawyerId}/confirm');
};
return service;
});
LawyerController
app.controller('LawyerController', ['$scope', 'people', '$routeParams',
function ($scope, people, $routeParams) {
$scope.lawyerId = $routeParams.id;
people.getUserInfo().then(function (response) {
$scope.userInfo = response.data;
});
}]);
HomeController
var isConfirmed = false;
app.controller('HomeController', function($scope, people, $http) {
if (!isConfirmed) {
people.getUserInfo().then(function (response) {
$scope.userInfo = response.data;
}, function (error) {
console.log(error)
});
}
});
App.js
$scope.doDelete = function(lawyer) {
var index = $scope.userInfo.lawyers.indexOf(lawyer);
$scope.userInfo.lawyers.splice(index, 1);
location.href = '#/lawyer';
};
If you changed your HTML, so you passed the person instead.
<button class="btn btn-primary" ng-click="doDelete(person)">Confirm</button>
You can use this to find the index within the lawyers, then remove it.
$scope.doDelete = function(lawyer) {
var index = $scope.userInfo.lawyers.indexOf(lawyer);
$scope.userInfo.lawyers.splice(index, 1)
};
The issue is your are using $http.delete which performs an HTTP Delete request. This doesn't sound like something you intended.

Editing data in AngularJS

I just began to study angular, tried to make some kind of SPA, but faced with problem of editing data in it. The obect is visible in console, but it hasn't appear on page, what I did wrong?
Here my controller:
var app = angular.module("testModule", ['ngRoute']);
app.config(function ($routeProvider){
$routeProvider.when('/', {
templateUrl: 'pages/main.html',
controller: 'addCtrl'
})
.when('/save', {
templateUrl: 'pages/save.html',
controller: 'editCtrl'
})
.when('/edit', {
templateUrl: 'pages/edit.html',
controller: 'addCtrl'
})
})
app.service('dataService', function($http) {
var data = {};
data.list = [];
var getData = function() {
$http.get("model/data.json").then(function (response) {
data.list = response.data;
});
}
return {
getDataFromJson: getData,
getData: data,
}
});
app.controller("mainCtrl", function($scope, dataService) {
dataService.getDataFromJson();
});
app.controller("editCtrl", function($scope, dataService) {
$scope.data = dataService.getData;
$scope.editData = function(adverse){
$scope.adverse= adverse;
console.log($scope.adverse)
}
});
and the part of page:
<div class="panel">
<form name="addForm" >
<div class="well" >
<div class="form-group">
<label for="name">Name:</label>
<input type='text' id="name" class="form-control" ng-model="adverse.name" placeholder={{adverse.name}} />
<label for="shop">Shop:</label>
<input type='text' id="shop" class="form-control" ng-model="adverse.shop" placeholder="{{adverse.shop}}" />
<label for="begin">Begin:</label>
<input id="begin" class="form-control" ng-model="adverse.begin" placeholder="{{adverse.begin}}" >
<label for="end">End:</label>
<input id="end" class="form-control" ng-model="adverse.end" placeholder="{{adverse.end}}" />
<button type="submit" class="btn btn-primary btn-block add_btn" ng-click="editData(adverse)">
Edit
</button>
</div>
</div>
</form>
</div>
Also here is a screenshot: the props of object suppose to be in the inputs but it hasn't.
enter image description here
If possible can you give me an example how I can do it by another way?
Recreated your scenario in this plunker. But it works. Please have a look at this plunker where you alo can see the StateProvider which is used instead of NgRoute
One thing I see which is incorrect is that you are sending the adverse object in the function and then setting the param to the scope adverse.
The thing is that the $scope.adverse already holds the values so you don't need to pass the value and setting it to the scope again. Remeber the scope is your glue between the view and ctrl
$scope.editData = function(){
console.log($scope.adverse)
}

TypeError: Attempted to assign to readonly property - when typing in a text field

I recently updated my Angular from 1.5.x to 1.6.4 and now, when I go to a form, I get the below error message whenever I try to type something up in the form/textbox:
TypeError: Attempted to assign to readonly property.
This is my controller:
mainApp.controller('newPostController', ['$scope', '$http', function($scope, $http){
$scope.post = '';
$scope.postCreated = false;
$scope.makeNewPost = function() {
$http.post('/api/post', {
title: $scope.post.title,
})
.then(function(res){
$scope.postCreated = true;
//extra code not related to the form itself...
};
}]);
My HTML looks like this:
<form ng-submit="makeNewPost()">
<div class="form-group">
<label for="title" class="control-label">Title</label>
<input type="text" autocomplete="off" class="form-control" ng-model="post.title" id="title" required="required">
</div>
<input type="submit" value="Submit">
</form>
I looked this error up and everything I am seeing has nothing to do with what my set up is like.
Please help me out on this. I don't know where to go from here.
Thanks
Try this...
you have initialized $scope.post = ''; as a string. But that should be $scope.post = {}; an object.
var mainApp = angular.module('app', []);
mainApp.controller('newPostController', ['$scope', '$http', function($scope, $http) {
$scope.post = {};
$scope.postCreated = false;
$scope.makeNewPost = function() {
console.log($scope.post.title);
$http.post('/api/post', {
title: $scope.post.title,
})
.then(function(res) {
$scope.postCreated = true;
//extra code not related to the form itself...
});
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app='app' ng-controller='newPostController'>
<form ng-submit="makeNewPost()">
<div class="form-group">
<label for="title" class="control-label">Title</label>
<input type="text" autocomplete="off" class="form-control" ng-model="post.title" id="title" required="required">
</div>
<input type="submit" value="Submit">
</form>
</div>

angularjs - how to get files attribute in input tag without using getElementById

I'm Uploading files with AngularJS.
How to get the input files just like regular JS?
This is what I need to simulate exactly
HTML:
<input type="file" name="file" id="fileImg" accept="image/*">
JS:
var filesUpload = document.getElementById("fileImg").files
This is what I have now
HTML:
<input type="file" name="file" ng-model="image" accept="image/*">
<input type="button" ng-click="submit()" value="press me">
Angular:
angular
.module('app')
.controller("productsCtrl", function($scope) {
$scope.image = {};
$scope.submit = function() {
var filesUpload = ????????????????
}
}
So, how to get the "files" in the input withput using "getElementById" ?
notice - can't change nothing , only the "??????"
any help will be appreciated..
tnx
You can use custom directive
var app = angular.module('App', []);
app.controller('Main', function($scope, $timeout, $rootScope){
$scope.onSubmit = function(){
console.log($scope.file);
}
});
app.directive('fileRead', [function () {
return {
scope: {
fileRead: '='
},
link: function (scope, elem, attrs) {
elem.bind('change', function (event) {
scope.$apply(function () {
scope.fileRead = event.target.files[0];
});
});
}
}
}]);
usage
<div ng-app="App">
<div ng-controller="Main">
<form ng-submit="onSubmit()">
<input type="file" name="someName" file-read="file">
<button type="submit">Submit</button>
</form>
</div>
</div>

getting data back to controller from form

I have this form below. When I change the text fields, it shows the changes here
<div>
{{authform.email}}{{authform.password}}
</div>
but when I try to submit the form by ng-click="signup()" on a button, it doesn't send me the value of text fields.
below is my code
<div class="col-md-12" ng-controller="authCtrl">
<div class="row">
<div class="col-md-14">
<div class="jumbotron">
<form>
<div class="createUserDiv"><input type="text" name="email" placeholder="enter your email address" ng-model="authform.email"/></div>
<div class="createUserDiv"><input type="text" name="password" placeholder="enter your password" ng-model="authform.password"/></div>
<div class="createUserDiv"><input type="text" name="confirmpassword" placeholder="confirm your password" ng-model="authform.confirmpassword"/></div>
<p><a class="btn btn-lg btn-success" ng-click="signup()">Splendid!<span
class="glyphicon glyphicon-ok"></span></a></p>
</form>
<div>
{{authform.email}} {{authform.password}}
</div>
</div>
</div>
</div>
</div>
here is my js
angular.module('myAPP')
.controller('authCtrl', function ($scope, $http, $location) {
$scope.signup = function() {
$scope.authform = {};
$scope.authform.email = "";
$scope.authform.password = "";
$scope.authform.confirmpassword = "";
var data = {
"dataBlob": {
"email": $scope.authform.email,
"password": $scope.authform.confirmpassword
}
};
console.log($scope.authform.email);
});
my console.log is coming up empty ...null....I am not sure why is it not binding the fields to data. I am pretty new to angular so I am still trying to figure out these things.
Stat your controller like this:
angular.module('myAPP')
.controller('authCtrl', function ($scope, $http, $location) {
$scope.authForm = {};
Then change your signup method to do this:
$scope.signup = function() {
console.log($scope.authForm);
}
Your values are already bound, but when you called $scope.authForm = {}; inside of signup, you are overwriting all of your values.
Also instead of ng-click="signup()" on your button, do this:
<form ng-submit="signup()">
Which will allow you to implement validations and submit on [enter] keypress when the user in an input field
For an example, see this fiddle

Categories