I've an input text not required and I want to use a ng-pattern for only digits character, but when I submit the form, the input isn't valid. Why?
<input type="text" ng-model="price" format="currency" ng-pattern="/^[0-9]*$/">
in jsfiddle, insert product without enter a price and submit:
http://jsfiddle.net/2f6qscrp/266/
ps: I cannont change the type of input!
try with /^[0-9]+$/ + sign is for accepting one or more digits.
See if this helps.
var app = angular.module('demo', []);
app.controller('MainCtrl', function($scope) {
$scope.price = '';
$scope.seeResults = function() {
console.log($scope.price);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.20/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="demo">
<head>
<meta charset="utf-8" />
</head>
<body ng-controller="MainCtrl">
<form name="form" ng-submit="seeResults()" novalidate role="form">
Price <span ng-show="form.$submitted && form.price.$error.pattern" style="color: red;">should be an integer</span>
<input name="price" type="text" ng-model="price" format="currency" ng-pattern="/^[0-9]*$/">
<button type="submit" >Submit</button>
</form>
</body>
</html>
Related
I'm trying to use AngularJS to validate a form, with the following code:
HTML
<body ng-app="plunker" ng-cloak>
<div ng-controller="MainCtrl as ctrl">
<form name="ctrl.mForm" novalidate>
<input type="text" name="Name" required />
<div ng-show="ctrl.mForm.Name.$invalid">Required</div>
<input type="submit" ng-click="send()" />
</form>
</div>
</body>
JS
import angular from 'angular';
angular.module('plunker', []).controller('MainCtrl', function($scope) {
var vm = this;
vm.send = function () {
alert('ok');
}
});
Plunker
I need to show a div when the input is empty (when the user clicks the submit button is enough), however nothing happens.
What is wrong with this code that it is unable to show the <div> when the input is empty?
Your controler code should have the variable for Name:
angular.module('plunker', []).controller('MainCtrl', function($scope) {
var vm = this;
vm.Name = "";
vm.send = function () {
alert('ok');
}
});
and your input control should use that variable in ng-model
<input type="text" name="Name" ng-model="Name" required />
Here i have updated the plunker
You should use ng-model to validate using angular. i have updated that in plunker. and if you want to use default validation of html required field you should submit form using ng-submit direactive on form element
You have to change the name of your form to "mForm". And on the div you want to show, you have to check if the name field is invalid and if the form got submitted.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="lib/style.css">
<script src="lib/script.js"></script>
</head>
<body ng-app="plunker" ng-cloak>
<div ng-controller="MainCtrl as ctrl">
<form name="mForm" novalidate>
<input type="text" ng-model="name" name="name" required />
<div ng-show="mForm.name.$invalid && mForm.$submitted"">Required</div>
<input type="submit" ng-click="send()" />
</form>
</div>
</body>
</html>
See this Plunker
I have input[type='date'] with no further validation rules.
Validation is not fired in the case when only part of a date is entered (say, the day and month). So when you have '01/02/YYYY' it's been taken for empty value and $error.date is not changed, so the validation message is missing.
If you first enter any valid date and then remove its part (say, the year) $error.date is updated and a validation message shows up.
Does anybody have any idea how to fire validation on a partly entered date?
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-date-input-directive-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
</head>
<body ng-app="dateInputExample">
<script>
angular.module('dateInputExample', [])
.controller('DateController', ['$scope', function($scope) {
$scope.example = {
value: ''
};
}]);
</script>
<form name="myForm" ng-controller="DateController as dateCtrl">
<label for="exampleInput">Pick a date:</label>
<input type="date" id="exampleInput" name="input" ng-model="example.value" />
<div role="alert">
<span class="error" ng-show="myForm.input.$error.date">
Not a valid date!</span>
</div>
<tt>value = {{example.value | date: "yyyy-MM-dd"}}</tt><br/>
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
<tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
</form>
</body>
</html>
The bug was fixed in the next versions of Angular (upgraded from 1.4.3 to 1.8.2):
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-date-input-directive-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="dateInputExample">
<script>
angular.module('dateInputExample', [])
.controller('DateController', ['$scope', function($scope) {
$scope.example = {
value: ''
};
}]);
</script>
<form name="myForm" ng-controller="DateController as dateCtrl">
<label for="exampleInput">Pick a date:</label>
<input type="date" id="exampleInput" name="input" ng-model="example.value" />
<div role="alert">
<span class="error" ng-show="myForm.input.$error.date">
Not a valid date!</span>
</div>
<tt>value = {{example.value | date: "yyyy-MM-dd"}}</tt><br/>
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
<tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
</form>
</body>
</html>
I got this code from Vladyslav Babenko from this post over here (Clone elements in angularjs):
var App = angular.module('App', []).controller('Test', ['$scope',
function($scope) {
$scope.inputCounter = 0;
$scope.inputs = [{
id: 'input'
}];
$scope.add = function() {
$scope.inputTemplate = {
id: 'input-' + $scope.inputCounter,
name: ''
};
$scope.inputCounter += 1;
$scope.inputs.push($scope.inputTemplate);
};
$scope.teste = function (pergunta) {
console.log("in");
}
}
])
<!DOCTYPE html>
<html ng-app="App">
<head lang="en">
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-controller="Test">
<form ng-submit="teste()">
<div class="pure-g entry" ng-repeat="input in inputs track by input['id']">
<div class="pure-u-1-5">
<input type="text" class="pure-input-1" id="input" name="input-1">
</div>
<div class="pure-u-1-5">
<input type="text" class="pure-input-1" id="date" name="date">
</div>
<div class="pure-u-1-5">`enter code here`
<input type="text" class="pure-input-1" id="input-2" name="input-2">
</div>
</div>
</form>
<button type="button" id="add" ng-click="add()">Add</button>
<button type="submit">teste</button>
</body>
</html>
It works fine, but when a add multiples forms, how can I get the values from each form?
Give every input a ng-model:
<input type="text" class="pure-input-1" id="input-2" ng-model="user.name" name="input-2">
Now you can adress the input value in your controller with:
$scope.user.name
Read more about this topic: https://docs.angularjs.org/guide/forms
Hi I'm trying to set required input fields when parent div is active?
Only active div's inputs must be required. I'm trying to do this for form submit. I also try with jQuery but it didn't worked.
PS: In fact, I don't want to use any jQuery code if possible.
My codes as seen below:
var app = angular.module("App", []);
app.controller("Controller", function($scope) {
$scope.aClick = function(event) {
$('input').removeAttr("ng-required");
$(event.target).attr("ng-required", false);
};
});
<!DOCTYPE html>
<html ng-app="App">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-controller="Controller">
<form name="frm">
<div ng-click="aClick($event)">
<input type="text" placeholder="Name" ng-model="name" ng-required="true">
<input type="text" placeholder="Surname" ng-model="surname" ng-required="true">
</div>
<div ng-click="aClick($event)">
<input type="text" placeholder="Age">
<input type="text" placeholder="Gender">
</div>
<button ng-disabled="frm.$invalid">Send</button>
</form>
</body>
</html>
Thank you!
ng-required doesn't have to be hard coded to true or false. You can use a variable off the scope. Then you can set that variable to true or false depending on what div is active or any other condition you want to account for. Maybe something like this depending on what you are doing
<div ng-click="aClick($event)">
<input type="text" placeholder="Name" ng-model="name" ng-required="div1IsActive">
<input type="text" placeholder="Surname" ng-model="surname" ng-required="div1IsActive">
</div>
$scope.aClick = function(event) {
$scope.div1IsActive = true; // or whatever
};
Here we were trying to send the user entered input value to Servlet.
So below is one example, When user entered minimum length for input field then inbuilt angular validation occurs and because of this minimum length validation error its related field model value is set to "undefined" or empty.
Due to this in the servlet we are getting the value as empty. Unable to do Server side validation.
Please provide your suggestions.
Thanks in advance.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-text-input-directive-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.min.js"></script>
</head>
<body ng-app="textInputExample">
<script>
angular.module('textInputExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.text = 'guest';
$scope.word = /^\s*\w*\s*$/;
}]);
</script>
<form name="myForm" ng-controller="ExampleController">
Single word: <input type="text" name="input" ng-model="text"
ng-pattern="word" ng-minlength="4" ng-trim="false">
<span class="error" ng-show="myForm.input.$error.required">
Required!</span>
<span class="error" ng-show="myForm.input.$error.minlength">
Single word only!</span>
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
<tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
<tt>Modal Text Box Value = {{text}}</tt><br/>
</form>
</body>
</html>
You can dig down and retrieve the $viewValue from $scope.myForm. I can't comment on if this is a best practice, but it will certainly give you the value you are looking for, despite the form being invalid. Hope this helps.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-text-input-directive-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.min.js"></script>
</head>
<body ng-app="textInputExample">
<script>
angular.module('textInputExample', [])
.controller('ExampleController', ['$scope',
function($scope) {
$scope.text = 'guest';
$scope.word = /^\s*\w*\s*$/;
$scope.submitForm = function() {
console.log($scope.myForm.input.$viewValue);
console.log($scope.text);
}
}
]);
</script>
<form name="myForm" ng-controller="ExampleController" ng-submit="submitForm()">
Single word:
<input type="text" name="input" ng-model="text" ng-pattern="word" ng-minlength="4" ng-trim="false">
<span class="error" ng-show="myForm.input.$error.required">
Required!</span>
<span class="error" ng-show="myForm.input.$error.minlength">
Single word only!</span>
<br>
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt>
<br/>
<tt>myForm.input.$error = {{myForm.input.$error}}</tt>
<br/>
<tt>myForm.$valid = {{myForm.$valid}}</tt>
<br/>
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt>
<br/>
<tt>Modal Text Box Value = {{text}}</tt>
<br/>
<input type="submit" />
</form>
</body>
</html>
If you're setting ng-pattern, required, ng-minlength, etc. on your form, that means that you want to perform validation at client side. So you simply shouldn't allow the user to send a request to your servlet while the form is invalid. The easiest and simplest way being to disable the submit button if the form is invalid:
<button ng-disabled="myForm.$invalid" ...
That doesn't mean, of course, that you shouldn't also validate the submitted data at server-side.