I want to reset the form before I click outside input. But before resetting data, an error message flashes. Any idea how to do it without flashes?
Plunker: http://plnkr.co/edit/hOBZ3vAjBhFNEzq1EReF?p=preview
HTML:
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<form name="myForm" novalidate ng-controller="myCtrl">
<input type="text" name="field" ng-minlength="8" ng-model="field">
<span ng-if="myForm.field.$invalid && myForm.field.$touched" style="color: red">Error</span>
<br>
Reset
</form>
</body>
</html>
Javascript:
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope){
$scope.reset = function(){
$scope.field = "";
}
});
You should use ng-model-options for this special case where you can update actual ng-model value after particular set of interval
<input type="text" name="field" ng-minlength="8" ng-model="field"
ng-model-options="{ debounce: { 'default': 500, 'blur': 200 } }"/>
Working Plunkr
Related
I am new to AngularJS and try to implement form validation in "myApp" app.
I wrote the code below. The {{result}} should output "true"/"false". But it didn't work.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<form name = "myForm">
<p>Input the field: </p>
<input type = "text" name="myInput" ng-model = "myInput" required>
</form>
<p> The result:</p>
<p>{{result}}</p>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope){
$scope.result = myForm.myInput.$valid;
});
</script>
</body>
This must be correct code for your problem.
If you "watch" the changes in the "input field" then $valid result will generate.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="MyController">
<form name='myForm' novalidate>
<p>Input the field: </p>
<input type='text' ng-model='model.name' name='myInput' required/>
</form>
<p> The result:</p>
<p>{{myForm.myInput.$valid}}</p>
<script>
var app = angular.module('myApp', []);
app.controller('MyController',['$scope',function($scope) {
$scope.$watch('myForm.myInput.$valid',function(newValue,oldvalue) {
if(newValue) {
//do anything with new value
}
});
}]);
</script>
</body>
</html>
Hope this will be helpful to you.
As a new User to angularJS your approcach is some how correct in form validation.In future you will learn new vesions in angular and several validation methodologies.
following code line is the way that how we can check valid input in angularJS.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="">
<p>Try writing in the input field:</p>
<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
</body>
</html>
Your approach is correct.Keep it up and it will be great if you can define correct question clearly. :)
Cheers.
I have a controller name say "CtrlABC", in which I have two forms namely, formA and formB. I want to access one $scoepe varialbe name $scope.var1's value in both the forms at the same time, I am able to access and change var1 value in first form but when trying to make change or access it in another form(which is below) then completely its not changing or accessing.
Here is my sample code.
angular.module("MyApp").controller("test", ['$scope',function ($scope) {
$scope.StartDate;
$scope.generateChart=function(SelectedProduct){
//updated date should be here on click/submit of the form
console.log($scope.StartDate);
};
});
<div ng-controller="test"><form name="A" ng-submit="generateChart(selectedProduct)" novalidate> <md-input-container><label>From</label>
<md-datepicker required ng-model="StartDate"></md-datepicker>
</md-input-container></form>
<form name="B" ng-submit="generateChart(selectedProduct)" novalidate> <md-input-container><label>From</label>
<md-datepicker required ng-model="StartDate"></md-datepicker>
</md-input-container></form></div>
</div>
If I try to change the date from one to another the ng-modal variable is not updating itself.
It should work according to your code, here is a demo. Probably you can check for other parts,
Make sure you are using the angular-material version v1.1 and above
// Code goes here
var app = angular.module('app', ["ngMaterial"]);
app.controller('AppCtrl', function($scope) {
$scope.StartDate;
$scope.generateChart = function(SelectedProduct) {
//updated date should be here on click/submit of the form
console.log($scope.StartDate);
};
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<link data-require="angular-material#0.11.0" data-semver="0.11.0" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.css" />
<script data-require="jquery#*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script data-require="angular.js#*" data-semver="1.4.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script data-require="angular-material#0.11.0" data-semver="0.11.0" src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.1/angular-material.js"></script>
<script data-require="angular-animate#1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular-animate.js"></script>
<script data-require="angular-aria#1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular-aria.js"></script>
<script src="script.js"></script>
</head>
<body >
<div ng-controller="AppCtrl">
<form name="A" ng-submit="generateChart(selectedProduct)" novalidate>
<md-input-container>
<label>From</label>
<md-datepicker required ng-model="StartDate"></md-datepicker>
</md-input-container>
</form>
<form name="B" ng-submit="generateChart(selectedProduct)" novalidate>
<md-input-container>
<label>From</label>
<md-datepicker required ng-model="StartDate"></md-datepicker>
</md-input-container>
</form>
</div>
</body>
</html>
I am making a simple validation of required, but unable to find ng-Message working on wrong entry or on clicking submit. Can someone help me out where am I wrong?
HTML:
<html>
<head>
<!-- Script Files -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<form name="form1" id="form1" novalidate>
<input type="text" name="age" ng-minlength="3" required/>
<div ng-messages="form1.age.$error" ng-show="(form1.age.$error.required || form1.age.$error.minlength) && (form1.age.$touched || form1.$submitted) " >
<div ng-message="required">This is required</div>
<div ng-message="minlength">Length is too less</div>
</div>
<a data-ng-click="submit(form1.$invalid)">Click</a>
</form>
<script>
//module declaration
var app = angular.module('myApp', ['ngMessages']);
//controller declaration
app.controller('myCtrl', function($scope) {
var submit = function(invalid){
if(invalid) return;
}
});
</script>
</body>
</html>
Your age input has no ng-model. Validation alá minlength only works if ng-model is present:
<input type="text" name="age" ng-model="age" ng-minlength="3" required/>
This is due to how validators work. You'll notice ng-model is not set, when $valid is false. There's always a hint in the docs as well: https://docs.angularjs.org/api/ng/directive/ngMinlength
Also ng-model doesn't need to be the same as the field name.
<form class="" ng-submit="submit()" ng-controller="MailingListController">
<input class="form-element large" placeholder="Email address" ng-model="emailaddress">
<input class="form-submit button large bkg-charcoal bkg-hover-pink color-white color-hover-white" type="submit" id="submit" value="Submit">
</form>
<script>
angular.module('ComingSoon', [])
.controller('MailingListController', ['$scope', function($scope) {
console.log("Working");
$scope.submit = function() {
console.log($scope.emailaddress);
};
}]);
</script>
I have tried to submit this form and the logs is showing there is nothing inside $scope.emailaddress. I have followed the documentation from angular website but it still doesn't work. Where isit that i am doing it wrongly?
Controller Binding to the view May gone wrong . you can take a look
here in the following plnkr
html :-
<!DOCTYPE html>
<html ng-app="ComingSoon">
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MailingListController">
<form class="" ng-submit="submit()">
<input class="form-element large" placeholder="Email address" ng-model="emailaddress">
<input class="form-submit button large bkg-charcoal bkg-hover-pink color-white color-hover-white" type="submit" id="submit" value="Submit">
</form>
</body>
</html>
controller :-
angular.module('ComingSoon', [])
.controller('MailingListController', ['$scope', function($scope) {
console.log("Working");
$scope.submit = function() {
console.log($scope.emailaddress);
};
}]);
Check you console while doing !!
https://plnkr.co/edit/B7aJhGKhXin1tsldljpz?p=preview
hi it is working for me
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/angular.js"></script>
<script>
angular.module('ComingSoon', [])
.controller('MailingListController', ['$scope', function ($scope) {
console.log("Working");
$scope.submit = function () {
console.log($scope.emailaddress);
};
}]);
</script>
</head>
<body ng-app="ComingSoon">
<form class="" ng-submit="submit()" ng-controller="MailingListController">
<input class="form-element large" placeholder="Email address" ng-model="emailaddress">
<input class="form-submit button large bkg-charcoal bkg-hover-pink color-white color-hover-white" type="submit" id="submit" value="Submit">
</form>
</body>
</html>
I have some inputs (text, checkboxes, selects).
I want to update controller model only after button press.
<input type="email" ng-model="vm.email" ng-model-options="{updateOn:'not blur, maybe custom event'} }"/>
<button ng-click="vm.apply()">Apply</button>
vm.apply = function() {
//How to fire event to trigger model update?
}
Ok, i guess i find solution. We can use a submit event.
So only when user will press submit button, model will update values.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example79-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
</head>
<body ng-app="submitExample">
<script>
angular.module('submitExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.list = [];
$scope.text = 'hello';
$scope.submit = function() {
if ($scope.text) {
$scope.list.push(this.text);
}
};
}]);
</script>
<form ng-submit="submit()" ng-controller="ExampleController">
Enter text and hit enter:
<input type="text" ng-model="text" ng-model-options="{ updateOn: 'submit' }" name="text" />
<input type="submit" id="submit" value="Submit" />
<pre>list={{list}}</pre>
<pre>text={{text}}</pre>
</form>
</body>
</html>