If you look at this plunk, you see that if I change the model by using some function, the form doesn't get informed about it and it doesn't become dirty, how can I achieve this behavior?
$scope.obj = {};
$scope.setName = function() {
$scope.name = "set name !";
}
<form name="form">
<input type="text" ng-model="name" />
</form>
<button type="button" ng-click="setName()">
setName
</button>
<br />
{{form.$dirty}}
That's by design. The form becomes dirty is the user uses its control, not if the code modifies its underlying model.
But you can make the form (or a field of the form) dirty by using the form controller published in the scope by the form directive. In your case, since the form name is form, and assuming your input has a name:
<input type="text" name="name" ng-model="name" />
$scope.form.name.$setDirty()
have you tried somehting like:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = "";
$scope.obj = {};
$scope.setName = function() {
$scope.name = "set name !";
}
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="style.css" rel="stylesheet" />
<script src="https://code.angularjs.org/1.5.4/angular.js"></script>
<!-- By setting the version to snapshot (available for all modules), you can test with the latest master version -->
<!--<script src="https://code.angularjs.org/snapshot/angular.js"></script>-->
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<form name="form">
<input type="text" ng-model="name" required />
</form>
<button type="button" ng-click="setName()">
setName
</button>
<br />
{{form.$dirty}}
<br />
{{form.$touched}}
<br>
{{form.$invalid}}
</body>
</html>
add name attribute to your input element, here is the update plunker of yours
Using $scope.formName.filedName.$setDirty();
Related
i have this peace of code in angularjs:
<div ng-repeat="item in benchmarGeographyObj">
<div style="padding-right: 60px;float:left;">
<input readonly style="width: 100%;" type="text" id="unik" ng-value="item.BEN_BENCHMARK_GEOGRAPHY" />
</div>
</div>
The Problem when i try to add ng-model in the input text, the value of ng-value disappeared, how i can fix this proble please ?
From the ngValue reference:
It can also be used to achieve one-way binding of a given expression
to an input element such as an input[text] or a textarea, when that
element does not use ngModel.
https://docs.angularjs.org/api/ng/directive/ngValue
This means you have to use either ngModel or ngValue, but not both. They conflict.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.benchmarGeographyObj = [{'BEN_BENCHMARK_GEOGRAPHY': 1},{'BEN_BENCHMARK_GEOGRAPHY': 2}];
});
<!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 data-require="angular.js#1.3.x" src="//code.angularjs.org/1.3.1/angular.js" data-semver="1.3.1"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="item in benchmarGeographyObj">
<div style="padding-right: 60px;float:left;">
<input readonly style="width: 100%;" type="text" id="unik" ng-model="item.BEN_BENCHMARK_GEOGRAPHY" />
</div>
</div>
</body>
</html>
I am trying to setup a very basic login functiniolity with AngularJS
This is what I have:
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page - My ASP.NET Application</title>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/angular.js"></script>
</head>
<body ng-app ="MyApp">
<script src="/Scripts/ng/ngLogin.js"></script>
<div id="loginBox" ng-controller="loginCtrl">
<form action="/" id="userLogin">
<label>User id</label>
<input type="text" ng-model="userId" />
<label>Password</label>
<input type="text" ng-model="password" />
<input type="button" name="loginSubmit" ng-click="submit()" value="Login" />
</form>
</div>
</body>
</html>
ngLogin.js
angular.module("MyApp").controller('loginCtrl', ['$scope', '$log', function($scope, $log) {
alert($scope.userId);
$scope.submit = function () {
var usrName = $scope.userId;
var password = $scope.password;
alert(usrName);
$log.log(usrName);
}
}]);
But when I click the login button nothing happens neither the alert nor anything in the console log, what am I doing wrong?
Pass a dependencies array when you register your module:
angular.module("MyApp", [])
Error: [$injector:nomod] Module 'MyApp' is not available! You either
misspelled the module name or forgot to load it. If registering a
module ensure that you specify the dependencies as the second
argument.
Missing - []
angular.module("MyApp",[])
Can anyone tell me how can I do that please?
<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 data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.0-rc.2/angular.js" data-semver="1.4.0-rc.2"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<form name="form.one" ng-submit="submitForm()">
<input ng-model="name">
<input type="submit">
</form>
<p>Hello {{name}}!</p>
</body>
And my app.js is
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = "Name";
var data = {};
$scope.submitForm = function() {
var data = form.one.name;
};
});
How can I save input to the data variable? Is it possible to save on keypress?
To use your form with Angular, there's a few modifications you need to make for this code to work: first, you need to add the novalidate attribute to your form; it is used to disable the browser's native form validation. Angular will use it's own validation. Here's a few other modifications (they're explained in detail here):
<body ng-controller="MainCtrl">
<form novalidate>
<input ng-model="name">
<!-- The method for submitting the data goes on the button. -->
<!-- The name is passed to the method you want to use to store the data, which you make happen when the button is clicked by using the ngClick directive. -->
<input type="submit" ng-click="submitForm(name)" value="Click me!">
</form>
<p>Hello {{name}}!</p>
<!-- This bit of code is to display the results of adding names to the array in the browser window: -->
<pre>{{ data }}</pre>
</body>
Here's the Javascript:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = "Name";
// I put the data array in the $scope so it can be displayed in the browser window and you can see the results:
$scope.data = [];
// Now, whenever the button is clicked, this method is run.
// It then stores the name in the 'data' array defined above.
$scope.submitForm = function(name) {
$scope.data.push(name);
};
});
Try this for it to show straight after typing:
<body ng-controller="myApp">
<input type="text" ng-model="name">
<p>Hello {{name}}!</p>
</body>
Javascript:
var myApp = angular.module('myApp',[]);
myApp.controller('myApp', function ($scope) {
$scope.name = $scope.name;
console.log($scope.name)
});
Small little JSFiddle for this:
https://jsfiddle.net/joshdmiller/HB7LU/
Is there a way to initialize the following form fields so the Angular code doesn't display "NaN" when the form is loaded? Having the value start at zero would be nice.
<input type="text" id="field1" value="0"/>
<input type="text" id="field2" value="0"/>
<br />
Total {{field1*50--field2}}
http://plnkr.co/edit/Cn0tCJlclIMXivli1is0?p=preview
You can use the ng-init directive. Here's the stuff copied from your plunker that works with it. But you should use this with caution, here's an excerpt from the documentation:
The only appropriate use of ngInit is for aliasing special properties of ngRepeat, as seen in the demo below. Besides this case, you should use controllers rather than ngInit to initialize values on a scope.
<!DOCTYPE html>
<html ng-app>
<head>
<script data-require="angular.js#*" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
testing
<input type="text" id="field1" ng-model="field1" ng-init="field1 = 0"/>
<input type="text" id="field2" ng-model="field2" ng-init="field2 = 0"/>
<br />
Total {{field1*50--field2}}
</body>
</html>
So really, you should do this:
angular.module('app', [])
.controller('testCtrl', ['$scope',
function($scope) {
function init() {
$scope.field1 = 0;
$scope.field2 = 0;
}
init();
}
]);
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" />
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-app="app">
<div ng-controller="testCtrl">
testing
<input type="text" id="field1" ng-model="field1" />
<input type="text" id="field2" ng-model="field2" />
<br />Total {{ field1 * 50 - -field2}}
</div>
</body>
</html>
You just add a controller to your HTML and assign a ng-model to your <input> fields and intialize it with some values in the controller instead of using value in <input>.
That's enough to have a default value for the fields
Here is the working plunker of your code,
http://embed.plnkr.co/Ssk1bP6LWq9YgAIDYaEk/preview
Hope this helps!!!!
My login screen has HTML like this:
<span class="label">
User Name
<i class="fa"
ng-class="{'fa-exclamation-triangle': as.vloginUserName(as.forms.login.loginUserName) != 'OK'}"
title="{{ as.vloginUserName(as.forms.login.loginUserName) }}"></i>
</span>
<input class="w15r"
id="loginUserName"
name="loginUserName"
ng-change="as.clearRegisterData()"
ng-model="as.loginUserName"
ng-minlength="3"
type="text"
value="" />
and I am using this function to check the minimum length:
vloginUserName = function (field) {
if (angular.isDefined(field)) {
if (field.$error.minlength) return "Minimum Length 5";
}
return "OK";
}
Is there a way that I could delay the presentation of the error message that says "Minimum Length 5" ?
Using ngModelOptions you can specify a custom list of events that will trigger a model update and/or a debouncing delay so that the actual update only takes place when a timer expires; this timer will be reset after another change takes place.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example35-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="debounceExample">
<div ng-controller="ExampleController">
<form>
Name:
<input type="text" ng-model="user.name" ng-model-options="{ debounce: 5000 }" /><br />
</form>
<pre>username = "{{user.name}}"</pre>
</div>
</body>
</html>
script.js
(function(angular) {
'use strict';
angular.module('debounceExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.user = {};
}]);
})(window.angular);
may be this plnkr will help uh.. try this... here, the model field will be updated after 5 sec delay and the error check will occur afterwards...