I am new to Angular Programming. If someone can help locating the error.
AddEmployee FORM (HTML)
<div ng-controller="EmployeeController">
<form novalidate>
Name: <input type="text" ng-model="Employee.EmployeeName" /><br />
Salary:<input type="text" ng-model="Employee.Salary" /><br />
<select ng-model="Employee.DepartmentId">
<option value="`enter code here`">--Select --</option>
<option ng-repeat="d in Department" ng-selected="selectedItemvalue == d.DepartmentId" value="{{d.DepartmentId}}">{{d.DepartmentName}}</option>
</select>
<button type="submit" ng-click="SaveData(Employee)">Submit</button>
</form>
Employee Contoller
var MyApp = angular.module("MyApp",[])
.controller("EmployeeController", function ($scope, $http) {
$scope.Employee = {
EmployeeName: '',
Salary: '',
DepartmentId:''
};
$scope.SaveData = function (data) {
$http({
url: 'PostEmployee',
method: 'POST',
data: JSON.stringify(data),
headers: {'content-type':'application/json'}
}).success(function (response) {
alert('Success');
}).error(function (error) {
alert('Error');
})
}
$http.get('GetDepartments').then(function (response) {
$scope.Department = response.data;
});
});
When I click on submit, SaveData method is probably not called. Plase help
UPDATE:
ng-app="MyApp" is added as parameter to body tag in the layout page and all the required scripts too. Moreover, the dropdown list gets populated correctly.
<body ng-app="MyApp">
#RenderBody()
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/angular")
#RenderSection("scripts", required: false)
</body>
UPDATE 2:
This is how the source looks in the browser.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>AddEmployee</title>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.5.3.js"></script>
</head>
<body ng-app="MyApp">
<div ng-controller="EmployeeController">
<form novalidate name="F1">
Name: <input type="text" ng-model="Employee.EmployeeName" /><br />
Salary:<input type="text" ng-model="Employee.Salary" /><br />
<select ng-model="Employee.DepartmentId">
<option value="">--Select --</option>
<option ng-repeat="d in Department" ng-selected="selectedItemvalue == d.DepartmentId" value="{{d.DepartmentId}}">{{d.DepartmentName}}</option>
</select>
<button type="submit" ng-click="SaveData(Employee)">Submit</button>
</form>
</div>
<script src="/Scripts/jquery-1.7.1.js"></script>
<script src="/Scripts/angular.js"></script>
<script src="/Scripts/EmployeeController.js"></script>
Did you call your controller.js on your layout page?
Have you checked your controller is initialized?
Please define $scope.Employee ={} on globally in your controller.
You have to specify an AngularJS module (in your case MyApp) to be used as the root module for the application.
You have to metion app name
solution
<div ng-app="myApp">
<div ng-controller="ExampleController">
<form novalidate class="simple-form">
<label>Name: <input type="text" ng-model="user.name" /></label><br />
<label>E-mail: <input type="email" ng-model="user.email" /></label><br />
Best Editor: <label><input type="radio" ng-model="user.preference" value="vi" />vi</label>
<label><input type="radio" ng-model="user.preference" value="emacs" />emacs</label><br />
<input type="button" ng-click="reset()" value="Reset" />
<input type="submit" ng-click="update(user)" value="Save" />
</form>
<pre>user = {{user | json}}</pre>
<pre>master = {{master | json}}</pre>
</div>
</div>
<script>
angular.module('myApp', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.master = {};
$scope.update = function(user) {
$scope.master = angular.copy(user);
};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
}]);
</script>
Refer this https://docs.angularjs.org/guide/forms
Use ng-app directive for initialization of angular app. ng-app="MyApp" in your example.
Related
I am creating a to-do list in angular js. I am trying to access the form in the controller. However, when I click the add new button, it doesn't add to the list.
There is also no error displaying which shows to me that the function probably isn't doing anything.
How do I get the add new button to add to the list.
Here is the index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<h1>To do List</h1>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="app.js"></script>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body ng-app="myApp" ng-controller="todoCtrl as vm">
<form name="vm.myform" ng-submit="toDoAdd()">
<input type="text" ng-model="todoInput" size="50" placeholder="Add New">
<input type="submit" ng-click="vm.toDoAdd " value="Add New">
<br>
<div ng-repeat="x in todoList">
<input type="checkbox" ng-model="x.done"><span ng-bind="x.todoText">
</span>
</div>
<p>
<button ng-click="remove()">Remove marked</button></p>
</form>
</body>
</html>
Here is app.js:
var app = angular.module('myApp', []);
app.controller('todoCtrl',['$scope' ,function ($scope) {
$scope.toDoList = [{todoText: "check", done: false}];
function todoAdd() {
var vm=this;
vm.toDoAdd=toDoAdd;
$scope.toDoAdd = function () {
$scope.toDoList.push({todoText: $scope.todoInput, done: false});
$scope.todoInput = "";
}
}
}])
I have made some changes to your application:
<body ng-app="myApp" ng-controller="todoCtrl">
<form ng-submit="toDoAdd()">
<input type="text" ng-model="todoInput" size="50" placeholder="Add New">
<input type="submit" value="Add New">
<br>
<div ng-repeat="x in toDoList">
<input type="checkbox" ng-model="x.done" /><span ng-bind="x.todoText">
</span>
</div>
<p>
<button type="button" ng-click="remove()">Remove marked</button></p>
</form>
</body>
var app = angular.module('myApp', []);
app.controller('todoCtrl',['$scope' ,function ($scope) {
$scope.toDoList = [{todoText: "check", done: false}];
$scope.toDoAdd = function () {
$scope.toDoList.push({todoText: $scope.todoInput, done: false});
$scope.todoInput = "";
}
}])
There are two ways of using controllers, one with $scope and other with controller as vm in this case for simplicity I am using $scope you can read more about the other notation in this guide
I am using sessionStorage to autosave form data while entering data into the input field.But I cannot able to save the data. If the page is refreshed the data should be present in the input field. Can anyone explain why it is not working?
My form is,
<form name="createArticleForm" ng-change="autoSave()">
<input type="text" name="firstname" ng-model="emp.firstname" required>
<input type="text" name="lastname" ng-model="emp.lastname" required>
<input type="text" name="designation" ng-model="emp.designation" required>
</form>
Js file:
$scope.autoSave= function(){
$scope.emp={};
sessionStorage.setItem('emp', JSON.stringify(emp));
var save = JSON.parse(sessionStorage.emp);
console.log(sessionStorage['emp']);
}
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<p>Write something in the input field:</p>
<input type="text" ng-model="emp.firstname" ng-change="myFunc()" ng-model="myValue" />
<input type="text" ng-model="emp.lastname" ng-change="myFunc()" ng-model="myValue" />
<input type="text" ng-model="emp.email" ng-change="myFunc()" ng-model="myValue" />
<input type="text" ng-model="emp.password" ng-change="myFunc()" ng-model="myValue" />
<p>The input field has changed {{value}} times.</p>
</div>
<script>
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.myFunc = function() {
sessionStorage.setItem('emp', JSON.stringify($scope.emp));
$scope.value = JSON.parse(sessionStorage.getItem('emp'))
};
}]);
</script>
</body>
</html>
I'm new to Angular and Ionic and I have problem with getting value of input. I get "undefined". Here is my code:
.controller('myCtrl', function($scope) {
$scope.submit = function () {
console.log($scope.name);
}
}
<form ng-submit="submit()">
<input type="text" ng-model="name">
<button class="button">Send</button>
</form>
try this
<form>
<input type="text" ng-model="name">
<button ng-click="submit()" class="button">Send</button>
</form>
Try this code
<form ng-submit="submit()">
<input type="text" ng-model="FinalData.name" name="name">
<button class="button">Send</button>
</form>
And then in controller
$scope.FinalData={};
$scope.FinalData.name ="dasda";
$scope.submit = function(){
console.log($scope.FinalData.name);
}
Check with this example
angular.module('myApp', []).controller('myCtrl', function($scope) {
$scope.name = 'Hello World!';
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller='myCtrl'>
<form ng-submit="submit()">
<input type="text" ng-model="name">
<button class="button">Send</button>
</form>
</div>
</body>
</html>
Firstly if have only one form on page, like:
<form class="form-horizontal" name="formCreateCtb">
...
Then i can easily access it in my controller in following way:
$scope.formCreateCtb.$setPristine(); // reset form validation
But as soon as i added second form on page, like:
<form class="form-horizontal" name="formCreateCtb">
...
<form class="form-horizontal" name="formCreateCtbs">
...
Then i can't access second form in scope like previosly:
$scope.formCreateCtb.$setPristine(); // still work OK
$scope.formCreateCtbs.$setPristine(); // Exception: formCreateCtbs is underfined
Why this behavior, and how to access form in scope, when i have multiple forms on page.
Thanks!
EDIT:
It seems the issue is that in project i have more complex markup, the second form
live in bootstrap tab, that is not visible at the moment of forms shown.
When i added second form out of modal, it works fine. The workaround is wrap entire tabs in one form element.
Use the ng-form directive
Online Demo - http://codepen.io/anon/pen/AXxVvY?editors=1010#0
html
<form name="formCreateCtb" novalidate>
<ng-form name="formCreateCtb">
<label>Email</label>
<input type="text" class="form-control" name="email" ng-model="email" required>
<p class="help-block" ng-show="formCreateCtb.email.$invalid">Valid Email Address Required</p>
</ng-form>
</form>
<form name="formCreateCtbs" novalidate>
<ng-form name="formCreateCtbs">
<label>Email 2</label>
<input type="text" class="form-control" name="email2" ng-model="email2" required>
<p class="help-block" ng-show="formCreateCtbs.email2.$invalid">Valid Email Address Required</p>
</ng-form>
</form>
<button ng-click="setPristine()">call setPristine</button>
js
.controller('mainController', function($scope) {
$scope.setPristine = function() {
$scope.formCreateCtb.$setPristine();
$scope.formCreateCtbs.$setPristine();
console.log('setPristine');
};
});
It is working for me.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $compile) {
'use strict';
$scope.data = {
"name": ""
};
$scope.reset = function() {
$scope.data.name = "";
$scope.form.$setPristine();
}
$scope.reset1 = function() {
$scope.data.name1 = "";
$scope.form1.$setPristine();
}
});
input.ng-invalid.ng-dirty {
background-color: #FA787E;
}
input.ng-valid.ng-dirty {
background-color: #78FA89;
}
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script data-require="angular.js#1.0.x" src="http://code.angularjs.org/1.1.5/angular.min.js" data-semver="1.0.7"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="MainCtrl">
<form name="form" id="form" novalidate>
<input name="name" ng-model="data.name" placeholder="Name" required/>
<button class="button" ng-click="reset()">Reset</button>
</form>
<form name="form1" id="form1" novalidate>
<input name="name1" ng-model="data.name1" placeholder="Name1" required/>
<button class="button" ng-click="reset1()">Reset</button>
</form>
<p>Pristine: {{form.$pristine}}</p>
<p> <pre>Errors: {{form.$error | json}}</pre>
<p>Pristine: {{form1.$pristine}}</p>
<p> <pre>Errors: {{form1.$error | json}}</pre>
</div>
</body>
</html>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $compile) {
'use strict';
$scope.data = {
"name": ""
};
$scope.reset = function() {
$scope.data.name = "";
$scope.form.$setPristine();
}
$scope.reset1 = function() {
$scope.data.name1 = "";
$scope.form1.$setPristine();
}
});
input.ng-invalid.ng-dirty {
background-color: #FA787E;
}
input.ng-valid.ng-dirty {
background-color: #78FA89;
}
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script data-require="angular.js#1.0.x" src="http://code.angularjs.org/1.1.5/angular.min.js" data-semver="1.0.7"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="MainCtrl">
<form name="form" id="form" novalidate>
<input name="name" ng-model="data.name" placeholder="Name" required/>
<button class="button" ng-click="reset()">Reset</button>
</form>
<form name="form1" id="form1" novalidate>
<input name="name1" ng-model="data.name1" placeholder="Name1" required/>
<button class="button" ng-click="reset1()">Reset</button>
</form>
<p>Pristine: {{form.$pristine}}</p>
<p> <pre>Errors: {{form.$error | json}}</pre>
<p>Pristine: {{form1.$pristine}}</p>
<p> <pre>Errors: {{form1.$error | json}}</pre>
</div>
</body>
</html>
I can clear a whole set of inputs but the thing is, it only clears when its value is valid. When it's not it does not clear anymore.
Something has to be added and I can do it via manually using an each loop. However I am looking to avoid this solution and something like a lesser code, so maybe someone has already come up with a solution. My current code is:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.input = {};
$scope.clear = function() {
$scope.input = {};
angular.forEach(angular.element("input"), function() {
_this = angular.element(key);
_this.val("");
});
};
});
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<form name="principalManagementForm">
First Name:
<input type="text" ng-model="input.firstName" name="firstName" id="firstName" minlength="5"><span ng-show="principalManagementForm.firstName.$invalid">First Name not over 5</span>
<br>Last Name:
<input type="text" ng-model="input.lastName" name="lastName" id="lastName" minlength="5"><span ng-show="principalManagementForm.lastName.$invalid">Last Name not over 5</span>
<br>Code:
<input type="text" ng-model="input.code" name="code" id="code" minlength="3"> <span ng-show="principalManagementForm.code.$invalid">Code not over 3</span>
<br>
<br>
<button ng-click="clear()">Clear</button>
{{ input }}
</form>
</div>
</body>
</html>
Just use ng-model-options with allowInvalid flag:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.input = {};
$scope.clear = function() {
$scope.input = {};
angular.forEach(angular.element("input"), function() {
_this = angular.element(key);
_this.val("");
});
};
});
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<form name="principalManagementForm">
First Name:
<input type="text" ng-model="input.firstName" name="firstName"
id="firstName" minlength="5" ng-model-options="{allowInvalid: true}">
<span ng-show="principalManagementForm.firstName.$invalid">First Name not over 5</span>
<br>Last Name:
<input type="text" ng-model="input.lastName" name="lastName"
id="lastName" minlength="5" ng-model-options="{allowInvalid: true}">
<span ng-show="principalManagementForm.lastName.$invalid">Last Name not over 5</span>
<br>Code:
<input type="text" ng-model="input.code" name="code" id="code"
minlength="3" ng-model-options="{allowInvalid: true}">
<span ng-show="principalManagementForm.code.$invalid">Code not over 3</span>
<br>
<br>
<button ng-click="clear()">Clear</button>
{{ input }}
</form>
</div>
</body>
</html>