Angular JS disabled button when input text empty - javascript

I start in angular JS and I want to disable (attribute "ng-disabled") a button while my input text "login" and "password" are empty. The problem is that, by default the text of input-text "login" is "LOGIN" and the text of input-text "password" is "PASSWORD", so my inputs are never empty...
Help,
Thanks

Simply use a placeholder instead of populating it with something
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.pass = ""; // empty, instead of "PASSWORD"
$scope.foo = () => {
console.log($scope.pass);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<input placeholder="PASSWORD" ng-model="pass">
<button ng-click="foo()" ng-disabled="!pass">Sign in</button>
</div>
Here is another example that suits your description, where you can populate it with some text, but still have the button disabled. It uses ng-focus to reset the input field if it is selected, and it has $dirty checking, to only allow to press the button when the input has been altered/changed.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.pass = "PASSWORD";
$scope.foo = () => {
console.log($scope.pass);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<form name="form">
<input ng-focus="pass=''" name="pass" ng-model="pass">
<button ng-click="foo()" ng-disabled="!form.pass.$dirty || !pass">Sign in</button>
</form>
</div>

Related

AngularJS - How to set the value of the checkbox as true by checking another checkbox?

I have two checkboxes. If you click checkbox B, checkbox A must be checked too. But in my code, when I click checkbox B, the checkbox A is also checked. But the ng-model of checkbox A is not changing it's value from false to true. Can someone help me with this? Thank you in advance! Here's my code below: (Try running the code snippet)
<div ng-app="myApp" ng-controller="myCtrl">
Box a
<input type="checkbox" ng-checked="box2" ng-model="box1">{{box1}}<br />
Box b
<input type="checkbox" ng-model="box2"> {{box2}}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.box1 = false;
$scope.box2 = false;
});
</script>
One solution can be attach a change event handler to the second checkbox and change the box1's scope inside this method.
<div ng-app="myApp" ng-controller="myCtrl">
Box a
<input type="checkbox" ng-checked="box2" ng-model="box1">{{box1}}<br />
Box b
<input type="checkbox" ng-change="change()" ng-model="box2"> {{box2}}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.box1 = false;
$scope.box2 = false;
$scope.change=function(){
$scope.box1=$scope.box2;
}
});
</script>
One single advice:
ng-model and ng-checked are not meant to be used together.
ng-checked is expecting an expression, so by saying ng-checked="true", you're basically saying that the checkbox will always be checked.
You should be able to just use ng-model, binded to a boolean property on your model.
You can add ng-change directive on box2, which will invoke the function, where you can change the value of box1 programmatically, like this:
<div ng-app="myApp" ng-controller="myCtrl">
Box a
<input type="checkbox" ng-checked="box2" ng-model="box1">{{box1}}<br />
Box b
<input type="checkbox" ng-model="box2" ng-change="checkBox1()"> {{box2}}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.box1 = false;
$scope.box2 = false;
$scope.checkBox1 = function() {
$scope.box1 = $scope.box2;
}
});
</script>
Pass same variable into ng-model of both input boxes
<div ng-app="myApp" ng-controller="myCtrl">
Box a
<input type="checkbox" ng-checked="box2" ng-model="box1">{{box1}}<br />
Box b
<input type="checkbox" ng-model="box2" ng-change="onChange()"> {{box2}}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.box1 = false;
$scope.box2 = false;
$scope.onChange= function(){
$scope.box1= $scope.box2;
};
});
</script>
basically, ng-checked does not change the value of $scope.box1.
what you can do is display {{box2 || box1}} instead of {{box1}}
#Commercial Suicide has a good answer. I also found another method which uses less logic. Check the codes below:
<div ng-app="myApp" ng-controller="myCtrl">
Box a
<input type="checkbox" ng-checked="box2" ng-model="box1">{{box1}}<br />
Box b
<input type="checkbox" ng-click="click()" ng-model="box2"> {{box2}}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.box1 = false;
$scope.box2 = false;
$scope.click = function () {
$scope.box1 = $scope.box2;
};
});
</script>

How do I display the user input when user clicks submit button. Also clear the message when user clicks the clear button. (Angularjs)

How do I display the user input when user clicks submit button. Also clear the message when user clicks the clear button. (please & thank you)
<html>
<head>
<title></title>
angular.module('exampleModule', [])
.controller('messageController', ['$scope', function($scope) {
$scope.message = '';
}])
</script>
</head>
<body ng-app="exampleModule">
<div ng-controller="messageController">
Input:
<input ng-model="message" />
<button>Submit</button>
<button>Clear</button>
<br/>
<div>Message: {{message}}</div>
</div>
</body>
</html>
Give your buttons a ng-click event and handle the event in your controller.
If the submit button is pressed set the show veriable to true, so that it will display.
HTML:
<div ng-app="exampleModule">
<div ng-controller="messageController">
Input:
<input ng-model="message" />
<button ng-click="display()">Submit</button>
<button ng-click="clear()">Clear</button>
<br/>
<div ng-show="show">Message: {{message}}</div>
</div>
</div>
AngularJS Controller:
angular.module('exampleModule', [])
.controller('messageController', ['$scope', function($scope) {
$scope.show = false;
$scope.message = '';
$scope.clear = function() {
$scope.message = '';
};
$scope.display = function() {
$scope.show = true;
};
}])
JSFiddle: https://jsfiddle.net/Anokrize/2fvtbwd2/

Pass ng-model value into ng-click failed

How to pass ng-model's value to ng-click?
<div ng-controller="TodoCtrl">
<input type="text" ng-model="username">
<button class="btn-primary" type="submit" ng-click="submit(username)">submit</button>
</div>
Why in my submit function it doesn't get the username's value?
http://jsfiddle.net/U3pVM/26604/
You don't need to pass username as a parameter to your function. You can get the username value from $scope.username in your function already.
Here is the correct answer:
Corrected the 'username' in alert and also while defining the method should not use paranthesis $scope.submit = function() { }
var app = angular.module('myApp', []);
app.controller('TodoCtrl', function($scope) {
$scope.submit = function(username){
alert(username) //get username here
}
});
Also you have specify the module name in the html:
<div ng-app='myApp'>
<div ng-controller="TodoCtrl">
<input type="text" ng-model="username">
<button class="btn-primary" type="submit" ng-click="submit(username)">submit</button>
</div>
</div>
There are some missings and spelling errors.
var app = angular.module('myApp', []);
app.controller('TodoCtrl', function($scope) {
$scope.submit = function(username){
alert(username) //get username here
console.log("username", username)
}
});
<div ng-app ="myApp">
<div ng-controller="TodoCtrl">
<input type="text" ng-model="username">
<button class="btn-primary" type="submit" ng-click="submit(username)">submit</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
Here is the updated Demo
There are some errors in your code
Below, find the fixed code
HTML
<div ng-app="myApp">
<div ng-controller="TodoCtrl">
<input type="text" ng-model="username">
<button class="btn-primary" type="submit" ng-click="submit(username)">submit</button>
</div>
</div>
CONTROLLER
var app = angular.module('myApp', []);
app.controller('TodoCtrl', function($scope) {
$scope.submit = function(username){
alert(userame) //get username here
}
});
there are errors in your fiddle
please update your submit method as below
$scope.submit = function(username){
alert(username) //get username here
}
You are using parenthesis () after $scope.submit which is invalid declaration for function.
also give name to ng-app like
<div ng-app="myApp">
and inside alert give variable name properly , you have done spelling mistake in variable name.
There is a missing decleration of your ng-app attribute. Try this:
<div ng-app='myApp'>
In addition, correct your function name and argument typo:
$scope.submit = function(username){
alert(username)
}
This is an example of your requirement. Just test on my snippet sending value on alert().
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.submit = function(mymdl){
alert(mymdl);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-model="mymdl"/>
<button ng-click="submit(mymdl)">Submit</button>
</div>

ng-model value of input text box is undefined inside angularjs controller when set dynamically through javascript

In my HTML Page i am setting an input text box value not by typing but through JavaScript and then when I am fetching that value using AngularJS inside the controller using scope, then it's showing undefined....
Below is my code:-->
<!DOCTYPE html>
<html lang="en">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="formCtrl">
<form id="someForm" name="someForm">
First Name: <input type="text" id="fname" ng-model="user.firstname" ng-model-options="{updateOn: 'change'}" />
Last Name: <input type="text" id="lname" ng-model="user.lastname" ng-model-options="{updateOn: 'change'}" />
<input id="getUser" type="submit" ng-click="getUserName(user)" value="Get User" />
<button ng-click="resetForm(user)">RESET</button>
</form>
</div>
<script>
$('#getUser').on('click', function(){
//$("getUser").on('click', function(){
//alert("First Name "+$("#fname").val());
$("#lname").val($("#fname").val());
alert("Last Name set to "+$("#lname").val());
// });
});
</script>
<script>
//angular.element(document).ready(function () {});
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.getUserName = function(user)
{
alert("Last Name in Angular Controller: "+$scope.user.lastname)
}
$scope.resetForm = function(user) {
//Even when you use form = {} it does not work
angular.copy({},user);
}
});
</script>
</body>
</html>
After clicking Get User Button, first the lastname field value is set through JQuery then AngularJS controller is called in which the ng-model value is undefined. I am unable to understand this. What is the solution or workaround for this type of scenario where the input text field value is set dynamically through JavaScript or JQuery and fetched and used using AngularJS Model and Controller.
Looks like you have a typo at ng-model="user.lasttname"
<!DOCTYPE html>
<html lang="en">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="formCtrl">
<form id="someForm" name="someForm">
First Name: <input type="text" id="fname" ng-model="user.firstname" ng-model-options="{updateOn: 'change'}" />
Last Name: <input type="text" id="lname" ng-model="user.lastname" ng-model-options="{updateOn: 'change blur'}" />
<input id="getUser" type="button" ng-click="getUserName(user)" value="Get User" />
<input id="getUser2" type="button" ng-click="getUserName(user)" value="Get User" />
<button ng-click="resetForm(user)">RESET</button>
</form>
</div>
<script>
$('#getUser').on('click', function(){
var element = angular.element($('#someForm'));
element.scope().user.lastname = $("#fname").val();
});
</script>
<script>
//angular.element(document).ready(function () {});
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.user = {};
$scope.getUserName = function()
{
console.log("User: "+ JSON.stringify($scope.user));
alert("Last Name in Angular Controller: "+$scope.user.lastname)
}
$scope.resetForm = function(user) {
//Even when you use form = {} it does not work
// angular.copy({},user);
}
});
</script>
</body>
</html>
Add this in angularjs code:-
<script>
//angular.element(document).ready(function () {});
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.user = {}; // Initiate this
$scope.getUserName = function(user)
{
alert("Last Name in Angular Controller: "+$scope.user.lastname)
}
});
Of course!!! If you want the binding (HTML <--> JavaScript) you must respect the rules of Angular. What you need to do is to update the ng-model being defined for the input box. So, add to your input box: ng-model="blabla" and within your JavaScript: $scope.blabla = <value>.
Correction: You do have the ng-model in the input, but still miss the assignment within your javascript code.

Trigger a button whenever a button is entered on a textarea

This is a textarea element
<textarea id="textfield" paceholder="type anything here"></textarea>
This is a button
<button type="button" class="btn btn-danger" id="button">Alert</button>
I can trigger the button above to alert the value of a textarea using jquery
<script>
$(function() {
$('#button').click(function() {
var value = $('#textfield').val();
alert(value);
});
});
</script>
Is there a way I can use angular to trigger the button alert by default whenever a text or value enters into the textarea
I am trying to use something like this
$scope.$watch('textfield', function () {
//pop alert if textarea has a value
but somehow lost along the line.
You can use the built in ngKeyup directive of Angular
<div ng-app="myapp" ng-controller="myctrl">
<textarea ng-keyup="show($event)" name="" id="" cols="30" rows="10"></textarea>
</div>
Your js
angular.module("myapp",[])
.controller("myctrl", function($scope){
$scope.show = function($event){
alert($event.target.value);
}
})
If you need to force a button click everytime text is entered alter your show function as follows
angular.module("myapp",[])
.controller("myctrl", function($scope){
$scope.show = function($event){
alert($event.target.value);
document.querySelector(".btn").click();
}
})
note: ngKeyup fires every time that key is released, if you need to listen for each character entered in the textaread use the ngChange event
<div ng-app="myapp" ng-controller="myctrl">
<textarea ng-change="show($event)" name="" id="" cols="30" rows="10"></textarea>
</div>
ng-change will help:
<input type="textbox" ng-model="text" ng-change="change()" />
In controller:
$scope.change = function() {
alert($scope.text);
};

Categories

Resources