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>
Related
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>
<html>
<head>
<title>Javascript Login Form Validation</title>
<link rel="stylesheet" href="css/style.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script>
function MyCtrl($scope){
$scope.myval = 5;
$scope.ctrlClickHandler = function(){
alert("Inside controller: value of myval is " + $scope.myval);
}
};
var globalClickHandler=function globalClickHandler(){
alert("Inside global click handler ");
}
</script>
</head>
<body>
<div class="container">
<div class="main" ng-app ng-controller="MyCtrl">
<form id="form_id" method="get" name="myform">
<label>User Name :</label>
<input type="text" name="username" id="username"/>
<label>Password :</label>
<input type="password" name="password" id="password"/>
<button type="button" ng-click="ctrlClickHandler()">Login</button>
</form></div></div></body></html>
this is my above code and i am unable to call the ctrlClickHandler method . i dont knwo where i am wrong. could any one please help to me on it.
Thanks in advance!.
you need to define the angular.module inorder to work with angular
var globalClickHandler=function globalClickHandler(){
alert("Inside global click handler ");
}
angular.module("app",[])
.controller("ctrl", MyCtrl)
function MyCtrl($scope){
$scope.myval = 5;
$scope.ctrlClickHandler = function(){
alert("Inside controller: value of myval is " + $scope.myval);
}
};
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="main" ng-app="app" ng-controller="MyCtrl">
<form id="form_id" method="get" name="myform">
<label>User Name :</label>
<input type="text" name="username" id="username"/>
<label>Password :</label>
<input type="password" name="password" id="password"/>
<button type="button" ng-click="ctrlClickHandler()">Login</button>
</form></div>
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.
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>
This is code we can validate in normal function:
<p>Username:<br>
<input type="text" name="username" ng-model="username" required>
<span style="color:red" ng-show="articleForm.username.$dirty && articleForm.username.$invalid">
<span ng-show="articleForm.username.$error.required">Username is required.</span>
</span>
</p>
But when I have title field that have code:
<header class="list-group-item-text">
<label>Title</label>
<input type="text" name="title" ng-model="$parent.mopost.title" class="form-control" required>
<span class="help-inline" ng-show="articleForm.$parent.mopost.title.$error.required">Required</span>
</header>
And controller:
$scope.mopost = {title:"",content1:"",content2:"",linkaudio:""};
Now validate in Angular, it does not operate. How I can validate attribute of object same above.
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<h2>Validation</h2>
<form ng-app="myApp" ng-controller="demoCtrl" name="articleForm" novalidate>
<header class="list-group-item-text">
<label for="title">Title</label>
<input id="title" type="text" name="user" ng-model="user" class="form-control" required>
<span ng-show="articleForm.user.$error.required">Username is required.</span>
</header>
<input type="submit" ng-disabled="articleForm.user.$dirty && articleForm.user.$invalid ||
articleForm.email.$dirty && articleForm.email.$invalid">
</form>
<script>
var app = angular.module('myApp', []);
app.controller('demoCtrl', function($scope) {
$scope.title = '';
});
</script>
</body>
</html>