I am new to Angularjs. I learned some basic concepts and I started developing a form. According to my requirements, I have to give 4 textboxes and if user wants wants more he adds another 4 textboxes. Meanwhile, I am unable to track the entered details.
// create angular app
var validationApp = angular.module('validationApp','');
// create angular controller
validationApp.controller('mainController', function($scope) {
$scope.choices = [{id: 'choice1'}];
$scope.addNewChoice = function() {
var newItemNo = $scope.choices.length+1;
$scope.choices.push({'id':'choice'+newItemNo});
};
$scope.showChoiceLabel = function (choice) {
return choice.id === $scope.choices[0].id;
};
$scope.removeChoice = function() {
if($scope.choices.length>1){
var newItemNo = $scope.choices.length-1;
$scope.choices.pop();
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="validationApp" ng-controller="mainController">
<div class="form-group" data-ng-repeat="choice in choices">
<label for="choice" ng-show="showChoiceLabel(choice)">Family Details</label>
<input type="text" ng-model="choice.name" name="id.family_name" class="form-control" placeholder="Enter Family Memeber Name" size="20">
<input type="text" ng-model="choice.relation" name="id.family_relation" class="form-control" placeholder="Enter Relation" size="15">
<input type="text" ng-model="choice.age" name="id.family_age" class="form-control" placeholder="Enter Age" size="5">
<input type="text" ng-model="choice.qualification" name="id.family_qualification" class="form-control" placeholder="Enter Qualification" size="15">
<br/><button ng-show="$last" ng-click="addNewChoice()" class="btn btn-success">Add another member</button>
<button ng-show="$last" ng-click="removeChoice()" class="btn btn-danger">Remove field</button>
</div>
</div>
You have had an error in your initialisation of your app. The empty array in angular.module('validationApp', []). This array is the list of modules myApp depends on:
var validationApp = angular.module('validationApp',[]);
Further information in the docs.
// create angular app
var validationApp = angular.module('validationApp', []);
// create angular controller
validationApp.controller('mainController', function($scope) {
$scope.choices = [{id: 'choice1'}];
$scope.addNewChoice = function() {
var newItemNo = $scope.choices.length + 1;
$scope.choices.push({id:'choice' + newItemNo});
};
$scope.showChoiceLabel = function(choice) {
return choice.id === $scope.choices[0].id;
};
$scope.removeChoice = function() {
if($scope.choices.length > 1) {
var newItemNo = $scope.choices.length - 1;
$scope.choices.pop();
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="validationApp" ng-controller="mainController">
<div class="form-group" data-ng-repeat="choice in choices">
<label for="choice" ng-show="showChoiceLabel(choice)">Family Details</label>
<input type="text" ng-model="choice.name" name="id.family_name" class="form-control" placeholder="Enter Family Memeber Name" size="20">
<input type="text" ng-model="choice.relation" name="id.family_relation" class="form-control" placeholder="Enter Relation" size="15">
<input type="text" ng-model="choice.age" name="id.family_age" class="form-control" placeholder="Enter Age" size="5">
<input type="text" ng-model="choice.qualification" name="id.family_qualification" class="form-control" placeholder="Enter Qualification" size="15">
<br/><button ng-show="$last" ng-click="addNewChoice()" class="btn btn-success">Add another member</button>
<button ng-show="$last" ng-click="removeChoice()" class="btn btn-danger">Remove field</button>
</div>
</div>
Related
I have a form with three input fields and function to add new row:
<form ng-submit="">
<fieldset data-ng-repeat="person in persons">
<input type="text" ng-model="username">
<input type="text" ng-model="house">
<input type="text" ng-model="points">
</fieldset>
<button ng-click="addNewChoice()">Add fields</button><input type="submit" value="Submit">
</form>
And then I try to print data and its empty.
<div id="choicesDisplay">
{{ persons }}
</div>
js part:
$scope.persons = [];
$scope.addNewChoice = function() {
var newItemNo = $scope.persons.length + 1;
$scope.persons.push({
'username': "",
'house': "",
'points': "",
});
};
$scope.removeChoice = function() {
var lastItem = $scope.persons.length-1;
$scope.persons.splice(lastItem);
};
How is it possible to submit form as an array? I cant use username[]. Thank you
Need to user <input type="text" ng-model="person.username">
html:
<form ng-submit="">
<fieldset data-ng-repeat="person in persons">
<input type="text" ng-model="person.username">
<input type="text" ng-model="person.house">
<input type="text" ng-model="person.points">
</fieldset>
<button ng-click="addNewChoice()">Add fields</button><input type="submit" value="Submit">
</form>
And then I try to print data and its empty.
<div id="choicesDisplay">
{{ persons }}
</div>
js part:
$scope.persons = [];
$scope.addNewChoice = function() {
var newItemNo = $scope.persons.length + 1;
$scope.persons.push({
'username': "",
'house': "",
'points': "",
});
};
$scope.removeChoice = function() {
var lastItem = $scope.persons.length-1;
$scope.persons.splice(lastItem);
};
I can't understand how to push object into an array I tried few different ways and still can't figured it out.
var app = angular.module('myApp',[])
app.controller('dropdown', function($scope, $http){
$scope.userInfo = [];
$scope.pushInArray = function() {
$scope.userInfo.push($scope.users)
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="dropdown">
<input type="text" name="name" ng-model="users.name" placeholder="Name">
<input type="text" name="email" ng-model="users.email" placeholder="Email">
<input type="text" name="phoneNo" ng-model="users.phoneNo" placeholder="phone Number">
<button ng-click="pushInArray()">Add</button>
<pre>{{userInfo}}</pre>
</div>
at click of add button I push the users information in userInfo properities. I works on first time but If I modified the the value already stored value also modified(after push value is modifying).
try angular.copy, this will copy the exist object with a new instance.
var app = angular.module('myApp',[])
app.controller('dropdown', function($scope, $http){
$scope.userInfo = [];
$scope.pushInArray = function() {
var user = angular.copy($scope.users);
$scope.userInfo.push(user);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="dropdown">
<input type="text" name="name" ng-model="users.name" placeholder="Name">
<input type="text" name="email" ng-model="users.email" placeholder="Email">
<input type="text" name="phoneNo" ng-model="users.phoneNo" placeholder="phone Number">
<button ng-click="pushInArray()">Add</button>
<pre>{{userInfo}}</pre>
</div>
You need to empty yours users before setting it to new values:
$scope.userInfo = [];
$scope.pushInArray = function(data) {
$scope.userInfo.push(data)
$scope.users = null;
}
HTML:
<input type="text" name="name" ng-model="users.name" placeholder="Name">
<input type="text" name="email" ng-model="users.email" placeholder="Email">
<input type="text" name="phoneNo" ng-model="users.phoneNo" placeholder="phone Number">
<button ng-click="pushInArray(users)">Add</button>
<pre>{{userInfo}}</pre>
Here is the working Plnkr
You need to pass the object to the scope function to persist it.
var app = angular.module('myApp',[])
app.controller('dropdown', function($scope, $http){
$scope.userInfo = [];
$scope.pushInArray = function(data) {
var entry = (JSON.parse(JSON.stringify(data)));
$scope.userInfo.push(entry);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="dropdown">
<input type="text" name="name" ng-model="users.name" placeholder="Name">
<input type="text" name="email" ng-model="users.email" placeholder="Email">
<input type="text" name="phoneNo" ng-model="users.phoneNo" placeholder="phone Number">
<button ng-click="pushInArray(users)">Add</button>
<pre>{{userInfo}}</pre>
</div>
I'm adding form elements dynamically using AngularJS as you can see below and it works very fine.
But sometimes, the user need to change the value of the placeholder and replace it with a value with his choice and I don't see if it's possible or not ?
Here is my HTML
<div ng-app="angularjs-starter" ng-controller="MainCtrl">
<fieldset data-ng-repeat="choice in choices">
<div class="col-xs-3">
<div class="input-group">
<span class="input-group-addon">Tr.</span>
<input id="tr-dpa" class="form-control" placeholder="Enter mobile number">
<button class="remove" ng-click="removeChoice()">-</button>
</div>
</div>
</fieldset>
<div class="form-group">
<div class="col-xs-5 col-xs-offset-1">
<button type="submit" class="add" ng-click="addNewChoice()">
+
</button>
</div>
</div>
</div>
And my script,
var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
$scope.choices = [{id: 'choice1'}];
$scope.addNewChoice = function() {
var newItemNo = $scope.choices.length+1;
$scope.choices.push({'id':'choice'+newItemNo});
};
$scope.removeChoice = function() {
var lastItem = $scope.choices.length-1;
$scope.choices.splice(lastItem);
};
});
jsfiddle
You should have your choices array like this:
$scope.choices = [{
id: 'choice1',
placeholder: 'Enter Mobile Number'
}];
And, inside ng-repeat,
<input id="tr-dpa" class="form-control" placeholder="{{choice.placeholder}}">
Now, when you add new input, ask for a placeholder and push it along with id.
$scope.addNewChoice = function() {
var newItemNo = $scope.choices.length + 1;
$scope.choices.push({
'id': 'choice' + newItemNo,
placeholder: $scope.placeholder
});
$scope.placeholder = "sample placeholder"
};
And, $scope.placeholder would be in HTML,
<input type="text" value="sample placeholder" ng-model="placeholder">
<button type="submit" class="add" ng-click="addNewChoice()">
+
</button>
working example
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 = {};
}
}]);
I am submitting a form and then making all the field empty but it's not working. Form is getting submitted successfully but the fields are not getting reset. I am using angular-material for styling. Updated controller.
Html
<form name="myform">
<md-input-container>
<label for="name">Contact Name</label>
<input type="text" md-maxlength="20" required="" md-no-asterisk name="name" ng-model="info.name" md-autofoucs>
<div ng-messages="myform.name.$error" role="alert">
<div ng-message="required">This is required.</div>
<div ng-message="md-maxlength">The name has to be less than 20 characters long.</div>
</div>
</md-input-container>
<md-input-container>
<label for="phone">Phone Number</label>
<input type="text" name="phone" required md-no-asterisk ng-model="info.phone">
<div ng-messages="myform.phone.$error">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
<md-input-container>
<label for="email">Email</label>
<input type="text" name="email" ng-model="info.email">
</md-input-container>
<md-input-container>
<md-button class="md-primary" ng-click="saveit(info)">Save</md-button>
<md-button class="md-primary">Cancel</md-button>
</md-input-container>
</form>
**Function in Controller**
angular.module('contact', ['ui.router', 'ngMaterial', 'templates','ngMessages'])
.config(['$mdThemingProvider', '$stateProvider', function ($mdThemingProvider, $stateProvider) {
$mdThemingProvider.theme('default')
.primaryPalette('blue')
.accentPalette('orange');
$stateProvider
.state('home', {
url: '',
templateUrl: 'templates/home.html',
controller: 'MainCtrl as vm'
});
}]).controller('MainCtrl', function ($scope, $mdSidenav,$mdDialog,$mdToast, contacts) {
var vm = this;
$scope.searchText ="";
$scope.toggleSidenav = function(){
$mdSidenav('left').open();
};
contacts.getall().then(function(response){
console.log(response.data);
$scope.people = response.data;
});
$scope.saveit = function(detail, myform){
if (!detail.name || !detail.phone) { return ;}
contacts.add({
name: detail.name,
phone: detail.phone,
email: detail.email
});
$mdToast.show(
$mdToast.simple()
.content("ContactAdded!")
.position('top, right')
.hideDelay(2000)
);
$scope.people.push(detail);
$scope.info = {};
$scope.myform.$setPristine();
$scope.myform.$setUntouched();
};
$scope.showConfirm = function(ev, person) {
var confirm = $mdDialog.confirm()
.title('Are you sure?')
.ariaLabel('Lucky day')
.targetEvent(ev)
.ok('Please delete it!')
.cancel('I want to keep it.');
$mdDialog.show(confirm).then(function() {
contacts.deletethis(person.id).then(function(){
$mdToast.show(
$mdToast.simple()
.content("Deleted!")
.position('top, right')
.hideDelay(2000)
);
});
var index = $scope.people.indexOf(person);
$scope.people.splice(index,1);
}, function() {
$scope.status = 'You decided to keep your debt.';
});
}; });
<form name="myform">
<input type="text" ng-model="info.name">
<input type="text" ng-model="info.phone">
<input type="text" ng-model="info.email">
</form>
app.controller('MainCtrl', function($scope) {
$scope.info = {}; // name, phone, email
$scope.saveit = function() {
$scope.info.name = ''; // reset name
$scope.info.phone= ''; // reset phone
$scope.info.email= ''; // reset email
// reset form and disable error messages
$scope.myform.$setPristine();
$scope.myform.$setUntouched();
};
});
You are not using $scope and this for controller correctly. You can use $scope or controller as syntax to bind your scope with view.
I suggest you to read more about it here.
Update your saveit() function inside controller as below:
app.controller('MainCtrl', function($scope, $mdSidenav, $mdDialog, $mdToast) {
var vm = this;
vm.info = {};
//your rest the code
vm.saveit = function() {
//do your operations here
vm.info = {};
};
});
Update your html page as below:
<div ng-controller="MainCtrl as vm">
<form name="myform">
<md-input-container>
<label for="name">Contact Name</label>
<input type="text" ng-maxlength="20" required md-no-asterisk name="name" ng-model="vm.info.name" md-autofoucs>
</md-input-container>
<md-input-container>
<label for="phone">Phone Number</label>
<input type="text" name="phone" required md-no-asterisk ng-model="vm.info.phone">
</md-input-container>
<md-input-container>
<label for="email">Email</label>
<input type="text" name="email" ng-model="vm.info.email">
</md-input-container>
<md-input-container>
<md-button class="md-primary" ng-click="vm.saveit()">Save</md-button>
<md-button class="md-primary">Cancel</md-button>
</md-input-container>
</form>
</div>
Give $setPristine to reset the form after saving.
$scope.myform.$setPristine();
Another approach
app.controller('MainCtrl', function($scope, $mdSidenav, $mdDialog, $mdToast) {
var vm = this;
vm.info = {};
vm.saveit = function($event)
{
var form = angular.element($event.target).parent("form")[0];
if (form !== undefined) form.reset();
};
});
<div ng-controller="MainCtrl as vm">
<form name="myform">
<md-input-container>
<label for="name">Contact Name</label>
<input type="text" ng-maxlength="20" required md-no-asterisk name="name" ng-model="vm.info.name" md-autofoucs>
</md-input-container>
<md-input-container>
<label for="phone">Phone Number</label>
<input type="text" name="phone" required md-no-asterisk ng-model="vm.info.phone">
</md-input-container>
<md-input-container>
<label for="email">Email</label>
<input type="text" name="email" ng-model="vm.info.email">
</md-input-container>
<md-input-container>
<md-button class="md-primary" ng-click="vm.saveit($event)">Save</md-button>
<md-button class="md-primary">Cancel</md-button>
</md-input-container>
</form>
</div>
The answer below is missing one line of code to work properly
You can check the answer from another question right here:
https://stackoverflow.com/a/40267630/4767208