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
};
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'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>
I am new to Angular JS. Here is my html :
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
<script src = "angular.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="index">
{{message}}
</div>
<form>
First Name:<br>
<input type="text" ng-model="user.username">{{user.username}}<br>
Last Name:<br>
<input type="password" ng-model="user.password">
</form>
<script src = "app.js"></script>
<script src = "credentials.js"></script>
</body>
</html>
Then I want to initialize some data for username and password :
(function(){
var app=angular.module("myApp",[]);
app.controller("index", ["$scope", function($scope){
$scope.message="Hello, it's me!";
$scope.user={
username: "admin",
password: "admin"
};
}]);
})();
The username and password doesn't get displayed. Why?
You're problem is that you have bound the controller to the div-tag surrounding the {{message}} expression and not the whole block containing the form. If bind your controller to a surrounding element youre code will work as expected.
Here's one way to do this:
<body ng-app="myApp">
<div ng-controller="index">
<div>
{{message}}
</div>
<form>
First Name:<br>
<input type="text" ng-model="user.username">{{user.username}}<br>
Last Name:<br>
<input type="password" ng-model="user.password">
</form>
</div>
</body>
Your controller div is not covering the area where you have user object. controller div must include the code in which you are accessing user object
You can change the code like this
<body ng-app="myApp">
<div ng-controller="index">
{{message}}
<form>
First Name:<br>
<input type="text" ng-model="user.username">{{user.username}}<br>
Last Name:<br>
<input type="password" ng-model="user.password">
</form>
</div>
<script src = "app.js"></script>
<script src = "credentials.js"></script>
</body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
as you can see in this example
ng-model directive binds the value of HTML controls (input, select,
textarea) to application data. ng-bind directive binds application
data to the HTML view.
i can see ng-model in your code but there is not ng-bind which actually binds data to your view. probably that is the reason why your code is not displaying username and password.
With the ng-model directive you can bind the value of an input field to a variable created in AngularJS.
You can use the ng-bind directive, which will bind the innerHTML of the element to the specified model property:
ng-model for input elements like input, textarea and ng-bind for h1,label etc.
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-controller="index" ng-app="myApp">
<form>
First Name:
<br>
<input type="text" ng-model="user.username">
<br> Last Name:
<br>
<input type="password" ng-model="user.password">
</form>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("index", ["$scope", function($scope) {
$scope.user = {
username: "admin",
password: "admin"
};
}]);
</script>
</body>
</html>
As,Venu prasad H S and domyos already suggested , a reply to the comment of M. Ko as i don't have enough reputation to comment,
You have defined the ng-model out of the scope of the controller,
<div ng-controller="index">
{{message}}
</div>
What this does is that your controller can access only the stuff inside this div only, as many others suggested you can put an entire div in the body you can do
<body ng-app="myApp">
<div ng-controller="index">
<div>
{{message}}
</div>
<form>
First Name:<br>
<input type="text" ng-model="user.username">{{user.username}}<br>
Last Name:<br>
<input type="password" ng-model="user.password">
</form>
</div>
As very aptly provided by domyos , now what this does is that your controller can get to your form and you can display the values you desire.
Alternatively you can also but your controller in the body tag with your ng-app
<body ng-app="myApp" ng-controller="index">
but it is recommended that you put it inside a div, you want to do this so that you can have multiple controllers in one module i.e. on ng-app.
Also, try to name controller as "indexCtrl" as in IndexController it is just a naming convention but that makes your code more readable.
Hope you find this information useful.
Use ng-app and ng-controller directives in your HTML page.
Here is link of Plunker for the same.
Plunker
And donot forget to give reference
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
Is there an easy way to have input[number] directive accept a blank value?
I basically need to an input that accepts 1 - 100 but also a blank value. Hoping there's an easy way to do it without making a custom validator just for this.
https://docs.angularjs.org/api/ng/input/input%5Bnumber%5D this is the built in Angular directive.
inputs by default allow empty values (given required and ng-required are not set):
<input type="number" min="1" max="100" ng-model="val">
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.5.0" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
</head>
<body ng-app>
<form name="f">
<input type="number" min="1" max="100" ng-model="val" name="in">
<b>val:</b> '{{val}}' <b>valid:</b> {{f.in.$valid}}
<button ng-click="val = ''">Clear</button>
</form>
</body>
</html>
I am new, trying my hands on angular. I made a list of checkbox using ng-repeat, there are five checkboxes and want to open a div only clicking on first checkbox. Don't know how to open.
Plunker
Thank you all in advance...
You can bind the model with checkbox and can toggle the display of the div based on the model value of the desired checkbox. I have created one plnkr for same: http://plnkr.co/edit/zcHbuwsUehDfBkgJWlIc?p=preview
HTML code
//HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example12-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="docsSimpleDirective">
<div ng-controller="Controller">
<div ng-repeat="cb in chkboxArr">
<input type="checkbox" ng-model="chkboxArrModel[$index]">{{$index}}
</div>
<div ng-if="chkboxArrModel[0]">Toggle me with first checkbox</div>
</div>
</body>
</html>
and Javascript code
//JS
(function(angular) {
'use strict';
angular.module('docsSimpleDirective', [])
.controller('Controller', ['$scope', function($scope) {
$scope.chkboxArr = [1,2,3,4];
$scope.chkboxArrModel = [];
}]);
})(window.angular);
Here is an example:
<div ng-show="checkbox1">Show me</div>
<input type="checkbox" ng-model="checkbox1"/>
<input type="checkbox" ng-model="checkbox2" />
<input type="checkbox" ng-model="checkbox3" />
Try this
<div ng-show="chk1">Div1</div>
<input type="checkbox" ng-model="chk1"/>
You can create a div like this:
<div ng-show="ModelData.Passengers == 'One'">
The actual div content you have in the div you want.
</div>
Assuming your radio buttons code to be like this:
<div>
<label>
<input type="radio" id="PassengersId1" name="PassengersName1" ng-model="ModelData.Passengers" value="One" />One
<input type="radio" id="PassengersId2" name="PassengersName2" ng-model="ModelData.Passengers" value="Two" />Two
</label>
</div>