I am building my first angular app and looking to post my form into my JSON data.
This is my form:
<span ng-show="show">
<form name="inputForm" class="form-group" ng-controller="FormController as autoctrl" ng-submit="inputForm.$valid && autoctrl.addGegevens(gegeven)" novalidate>
<br>
<p> Type: <input type="text" name="type" ng-model="type" style="margin-left:52px; padding-left:5px; width:165px;" minlength="2" maxlength="10" required /></p>
<p>Bouwjaar: <input type="number" name="bouwjaar" ng-model="bouwjaar" style="margin-left:22px; padding-left:5px; width:165px;" minlength="4" maxlength="4" required /></p>
<p>Km: <input type="number" name="km" ng-model="km" style="margin-left:60px; padding-left:5px; width:165px;" minlength="2" maxlength="6" required /></p>
<p>Brandstof: <input id="select" name="brandstof" ng-model="brandstof" style="margin-left:20px; padding-left:5px;" minlength="3" maxlength="7" required/></p>
<p>Kenteken: <input type="text" name="kenteken" ng-model="kenteken" style="margin-left:22px; padding-left:5px; width:165px;" minlength="6" maxlength="9" required /></p>
<p>Datum: <input type="text" name="datum" ng-model="datum" style="margin-left:40px; padding-left:5px; width:165px;" minlength="3" maxlength="11" required /></p>
<p>checked: <input type="checkbox" name="checked" ng-model="checked" style="margin-left:28px;" required /></p>
<br>
<button class="btn btn-primary" type="submit" value="submit">Toevoegen</button>
<div>{{inputForm.$valid}}</div>
</form>
</span>
And this is my app.js:
(function(){
var volkswagenApp = angular.module('volkswagenapp',[]);
volkswagenApp.controller('VolkswagenCtrl', [ '$http' , function($http){
var vw = this;
vw.gegevens = [];
$http.get('autos.json').success(function(data){
vw.gegevens = data;
});
}]);
volkswagenApp.controller('FormController',function(){
this.gegevens={};
/* this.addGegevens = function(gegeven) {
gegeven.gegevens.push(this.gegeven);
this.gegevens={};
}*/
this.addGegevens = function(gegeven){
this.gegevens.datum = Date.now();
vw.gegevens.push(this.gegeven);
this.gegeven = {};
}
});
})();
Can somebody tell me where I am going wrong? I did the same steps as they do on codeschool.
Since you are using controllerAs you need to add the controller object to all the variables in ng-model
Example:
<input name="type" ng-model="type">
Should be:
<input name="type" ng-model="autoctrl.type">
However you can make it simpler to post a single object by making all the ng-model's properties of the same parent
<input name="type" ng-model="autoctrl.myFormModel.type">
Then when you are ready to post you simply send myFormModel
$http.post(url, this.myFormModel).then(....
Note that you should store a reference to this so you can use that reference inside any callbacks. I see you using vm but it is not defined anywhere inside FormController
See John Papa Angular Style guide
Related
I am working on SPA and I include HTML pages into one basic page by ng-include.Let's call this basic page as external and the included pages as internal.In an internal page I have set an input attribute to be ng-model="userd.Username" and in the external page i would like to get the value of this input.
In some internal page register.html there is the following code:
<div class="form-group">
<div class="form-group">
<span class="regForm text-danger">*</span> <input
ng-model="userd.Username" type="text" maxlength="10"
placeholder="Enter your name" class="form-control input-md"
required />
</div>
<div class="form-group">
<span class="regForm text-danger">*</span> <input
ng-model="userd.Password" type="password" maxlength="8"
placeholder="Enter your password" class="form-control input-md"
required />
</div>
<div class="form-group">
<span class="regForm text-danger">*</span><input
ng-model="userd.Nickname" type="text" maxlength="20"
placeholder="Enter your nickname" class="form-control input-md"
required />
</div>
<div class="form-group">
<input ng-model="userd.Description" type="text" maxlength="50"
placeholder="Enter description about you"
class="form-control input-md" />
</div>
<div class="form-group">
<input ng-model="userd.Photo" type="text"
placeholder="Enter photo URL" class="form-control input-md" />
</div>
<div class="form-group">
<button ng-click="registerBtn()" class="btn btn-primary">Register</button>
</div>
</div>
In the external page:
<div ng-include="'register.html'" ng-controller="registerCon" ng-show="logreg"></div>
I've tried to use the $rootscope as following in the main controller of the external page:
var appvar = angular.module('myApp', []);
//The Main Controller of the page (single web page)
appvar.controller('myCtrl',['$scope','$http','$rootScope',function($scope, $http,$rootScope) {
$rootScope.storedsession="";
}]);
And in the controller 'registerCon' I wrote:
appvar.controller('registerCon',['$scope','$http','$rootScope',function($scope, $http, $rootScope) {
$scope.registerBtn = function() {
console.log(this.userd);
$http.post("http://localhost:8080/ExampleServletv3/registeruser",this.userd)
.success(function(response) {
console.log(response);
setTimeout(function () {
$scope.$apply(function(){
$rootScope.storedsession=this.userd.Username;
console.log($rootScope.storedsession);
});
});
});
};
}]);
but it prints undefined for console.log($rootScope.storedsession); in the console,I also tried $scope instead of $rootScope but it didn't work too.
Can someone help me please?
Thanks
This is my app.js
volkswagenApp
.controller('VolkswagenCtrl',
['$http' , function($http){
var vw = this;
vw.gegevens = [];
$http.get('autos.json').success(function(data){
vw.gegevens = data;
});
}]);
volkswagenApp
.controller('FormController',function(){
this.gegevens={};
/*this.addGegevens = function(gegeven) {
gegeven.gegevens.push(this.gegeven);
this.gegevens={};
}*/
this.addGegevens = function(gegeven){
this.gegevens.datum = Date.now();
vw.gegevens.push(this.gegeven);
this.gegeven = {};
}
});
and this is my index.html:
<span ng-show="show">
<form name="inputForm" class="form-group" ng-controller="FormController as autoctrl"
ng-submit="inputForm.$valid && autoctrl.addGegevens(gegeven)" novalidate>
<br>
<p> Type: <input type="text" name="autoctrl.type" ng-model="type" style="margin-left:52px; padding-left:5px; width:165px;" minlength="2" maxlength="10" required /></p>
<p>Bouwjaar: <input type="number" name="bouwjaar" ng-model="autoctrl.bouwjaar" style="margin-left:22px; padding-left:5px; width:165px;" minlength="4" maxlength="4" required /></p>
<p>Km: <input type="number" name="km" ng-model="autoctrl.km" style="margin-left:60px; padding-left:5px; width:165px;" minlength="2" maxlength="6" required /></p>
<p>Brandstof: <input id="select" name="brandstof" ng-model="autoctrl.brandstof" style="margin-left:20px; padding-left:5px;" minlength="3" maxlength="7" required/></p>
<p>Kenteken: <input type="text" name="kenteken" ng-model="autoctrl.kenteken" style="margin-left:22px; padding-left:5px; width:165px;" minlength="6" maxlength="9" required /></p>
<p>Datum: <input type="text" name="datum" ng-model="autoctrl.datum" style="margin-left:40px; padding-left:5px; width:165px;" minlength="3" maxlength="11" required /></p>
<p>checked: <input type="checkbox" name="checked" ng-model="autoctrl.checked" style="margin-left:28px;" required /></p>
<br>
<button class="btn btn-primary" type="submit" value="submit">Toevoegen</button>
<div>{{inputForm.$valid}}</div>
and this is the error in the console:
Error: Can't find variable: vw
I know that the variable W isn't defined in FormController, my question is how can i adjust the form controller so that it works.
I tried everything, searched the docs. watched several tutorials and i cant find out where im going wrong. This is for a school project. Please help!
In the FormController add vm = this at beginning.
autoctrl.addGegevens(inputForm) and
in the addGegevens function
this.addGegevens = function(inputForm){
this.gegevens.datum = Date.now();
for (var formField in inputForm){
if(inputForm.hasOwnProperty(formField)){
vw.gegevens.push({formField :inputForm[formField] });
}
}
}
You want to share VW variable to another controller. In order to do this you can use $rootScope. Please check below code which will work for you. Below is the updated span block
<span ng-show="show">
<form name="inputForm" class="form-group" ng-controller="FormController as autoctrl"
ng-submit="inputForm.$valid && autoctrl.addGegevens(gegeven)" novalidate>
<br>
<p> Type: <input type="text" name="autoctrl.type" ng-model="autoctrl.gegevens.type" style="margin-left:52px; padding-left:5px; width:165px;" minlength="2" maxlength="10" required /></p>
<p>Bouwjaar: <input type="number" name="bouwjaar" ng-model="autoctrl.gegevens.bouwjaar" style="margin-left:22px; padding-left:5px; width:165px;" minlength="4" maxlength="4" required /></p>
<p>Km: <input type="number" name="km" ng-model="autoctrl.gegevens.km" style="margin-left:60px; padding-left:5px; width:165px;" minlength="2" maxlength="6" required /></p>
<p>Brandstof: <input id="select" name="brandstof" ng-model="autoctrl.gegevens.brandstof" style="margin-left:20px; padding-left:5px;" minlength="3" maxlength="7" required/></p>
<p>Kenteken: <input type="text" name="kenteken" ng-model="autoctrl.gegevens.kenteken" style="margin-left:22px; padding-left:5px; width:165px;" minlength="6" maxlength="9" required /></p>
<p>Datum: <input type="text" name="datum" ng-model="autoctrl.gegevens.datum" style="margin-left:40px; padding-left:5px; width:165px;" minlength="3" maxlength="11" required /></p>
<p>checked: <input type="checkbox" name="checked" ng-model="autoctrl.gegevens.checked" style="margin-left:28px;" required /></p>
<br>
<button class="btn btn-primary" type="submit" value="submit">Toevoegen</button>
<div>{{inputForm.$valid}}</div>
{{ PostDataResponse}}
{{autoctrl.gegevens.type}}
{{autoctrl.gegevens.bouwjaar}}
</form>
</span>
And you can find the latest app code below
var volkswagenApp = angular.module('volkswagenapp', []);
volkswagenApp.controller('VolkswagenCtrl', ['$http', '$rootScope', function ($http, $rootScope) {
var vw = this;
vw.gegevens = [];
$http.get('autos.json').success(function (data) {
vw.gegevens = data;
});
$rootScope.VolksWagenAppScope = vw;
}]);
volkswagenApp.controller('FormController', ['$rootScope', function ($rootScope) {
this.gegevens = {};
//var vw = this;
// vw.gegevens = [];
/* this.addGegevens = function(gegeven) {
gegeven.gegevens.push(this.gegeven);
this.gegevens={};
}*/
this.addGegevens = function (gegeven) {
debugger;
this.gegevens.datum = Date.now();
$rootScope.VolksWagenAppScope.gegevens.push(this.gegevens);
this.gegevens = {};
}
}]);
It's normal.
In your second controller (FormController), there is no vw var declared.
You can add it as you did in the first controller :
var vw = this
Ideal way will be using a `factory' to store the results, and use that factory share data between two controller.
volkswagenApp
.factory('gegavensFactory', function() {
var _gegevens = [];
return {
init: function(gagaves) {
_gegavens = gegavens;
},
add: function(gegaven) {
_gegavens.push(gegaven);
}
}
)}
volkswagenApp
.controller('VolkswagenCtrl',
['$http', 'gegavensFactory' , function($http, gegavensFactory){
$http.get('autos.json').success(function(data){
gegavensFactory.init(data);
});
}]);
volkswagenApp
.controller('FormController',['gegavensFactory', function(gegavensFactory){
this.gegevens={};
this.addGegevens = function(gegeven){
this.gegevens.datum = Date.now();
gegavensFactory.add(this.gegeven);
this.gegeven = {};
}
}]);
How can one input be the same value as another input via angularjs? I know how to do this via jquery but not in angularjs. Here is my code:
<body ng-app="peopleApp">
<div ng-controller="myController">
<input class="form-control input-form" ng-model="input.user_code" name="user_code" type="text" maxlength="4" minlength="4" required>
<input class="form-control input-form" ng-model="input.username" name="username" type="text" required>
</div>
</body>
<script type="text/javascript">
var peopleApp = angular.module('peopleApp', []);
peopleApp.controller('myController', function(){
$scope.input = {
'username': $scope.input.user_code
}
});
</script>
So basically what I want is the first input element to be the same value as the second input element
use ng-blur or ng-change
<body ng-app="peopleApp">
<div ng-controller="myController">
<input class="form-control input-form" ng-blur="input.username = input.user_code" ng-model="input.user_code" name="user_code" type="text" maxlength="4" minlength="4" required>
<input class="form-control input-form" ng-model="input.username" name="username" type="text" required>
</div>
</body>
The answer above works, but if you want it to update in real time, just use the same model:
<input class="form-control input-form" ng-model="input.user_code" name="user_code" type="text" maxlength="4" minlength="4" required>
<input class="form-control input-form" ng-model="input.user_code" name="username" type="text" required>
When you change one of the two, the other will update as well. You can also use this as any other tag. For example, this will show what you type on the <p> tag:
<input class="form-control input-form" ng-model="input.user_code" name="user_code" type="text" maxlength="4" minlength="4" required>
<p> {{ input.user_code }} </p>
I would like to set invalid with angular when firstname is equals to lastname and change the color using styles to red.
http://jsbin.com/japir/2
function RegoController($scope) {
$scope.app = {
firstName: "Saroj"
};
$scope.$watch("app.lastName", function(newVal, oldVal) {
if (!!$scope.app.lastName && !!newVal)
if (angular.lowercase($scope.app.firstName) === angular.lowercase(newVal)) {
debugger;
$scope.form.inputLastName.$setValidity("sameName", false);
}
});
}
<body ng-app>
<div class="container" ng-controller="RegoController">
<div class="col-lg-4">
<form name="form">
<div class="form-group">
<label for="inputFirstName">First Name</label>
<input id="inputFirstName" class="form-control" type="text" ng-model="app.firstName" placeholder="Enter your firstname" required ng-minlength="3" ng-maxlength="20" />
</div>
<div class="form-group">
<label for="inputLastName">Last Name</label>
<input id="inputLastName" class="form-control" type="text" ng-model="app.lastName" placeholder="Enter your last name" required ng-minlength="3" ng-maxlength="20" />
</div>
<div class="form-group">
<label for="inputEmail">Email</label>
<input id="inputEmail" class="form-control" type="email" ng-model="app.email" placeholder="Enter your email" required />
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Save" />
</div>
</form>
{{app}}
</div>
</div>
</body>
The problem is that you are trying to select a form input that has no name; thus making it unable to find the field you are trying to invalidate. Here is a working example:
JSBIN: http://jsbin.com/yozanado/1/
Input field with name:
<input id="inputLastName" name="lastName" class="form-control" type="text" ng-model="app.lastName" placeholder="Enter your last name" required ng-minlength="3" ng-maxlength="20" />
Javascript:
$scope.form.lastName.$setValidity("sameName", false);
AngularJS form validation relies on the name of the form and the name of the fields to find the validation models on scope.
For example, if your HTML is:
<form name="form">
<input name="firstName" ng-model="firstName" />
</form>
You will be able to access the validation $error property on scope using the name attributes:
$scope.form.firstName.$error.sameName
To fix the issues you're having, add a name attribute to your input fields.
JSBin Demo
I'm setting some form values on an angular form and need to have the validation trigger/set the field to dirty programmatically. The current bug requires the user to actually interact with the form field to trigger the "required" validation and to have it turn green.
FB.Event.subscribe('auth.authResponseChange', function(response) {
if (response.status === 'connected') {
FB.api('/me', function(response) {
var scope = angular.element($("#PhotoUploadForm")).scope();
scope.$apply(function(){
scope.user.firstName = response.first_name;
scope.user.lastName = response.last_name;
scope.user.email = response.email;
});
});
And here is the html
<form no-validate id="PhotoUploadForm" name='form' action="/uploaded" enctype="multipart/form-data" method="POST" role="form" ng-controller="Controller">
<div class="col-md-5">
<div class="form-group">
<label class="control-label" for="firstName" >First Name</label>
<input type="text" class="form-control" id="firstName" name="firstName" ng-model="user.firstName" required />
</div>
<div class="form-group">
<label class="control-label" for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName" name="lastName" ng-model="user.lastName" required />
</div>
<div class="form-group">
<label class="control-label" for="email">Email</label>
<input type="email" class="form-control" id="email" name="email" ng-model="user.email" required />
</div>
</div>
</form>
You can do it this way:
angular.element('#PhotoUploadForm').scope().user.firstName.$dirty = true
Let me know if it helps.