I have a input text box and i want when user enter the value in text box and loses the focus. I want to validate this value from api values and need to show the appropriate message below the input box. How can i do in angular js
//HTML
<input type="text" ng-model="search" placeholder="Search ... " ng-focus="focusMsg()" ng-blur="blurMsg()">
// Controller
$scope.focusMsg = function () {
console.log('Focus');
}
$scope.blurMsg = function () {
console.log('Blur');
}
You can use the ng-blur directive.
<input type="text" ng-blur="ValidateBlur()" />
https://plnkr.co/edit/hy2sCVjvVqBrm1WSdiBl?p=preview
Module/Controller Setup code:
var app = angular.module("testApp", []);
app.controller("DarrenController", function($scope) {
$scope.Text = "Testing...";
$scope.ValidateBlur = function() {
alert('Validating');
}
});
HTML:
<body ng-app="testApp">
<div ng-controller="DarrenController">
<input type="text" ng-blur="ValidateBlur()" />
</div>
</body>
Related
I am having multiple input text in form and on ng-focus I am calling a method let's say GetFieldName().
I my angular.js how can I detect that method having the focus on first field or second.
How can I validate that withing getFieldName() method to get field which have focus on it.
The best solution is to make angularJS directive to get the attrs
or to make the validation
https://docs.angularjs.org/guide/forms
This is solution with controller and $event to get the name attribute from element
var myApp = angular.module('myApp',[]);
myApp.controller('formCtrl', ['$scope', function($scope) {
$scope.text = "sample text";
$scope.getName = function(event){
$scope.text = event.target.getAttribute('name');
};
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp">
<form ng-controller="formCtrl">
{{text }}
<input type="text" name="text1" ng-focus="getName($event)">
<input type="text" name="text2" ng-focus="getName($event)">
<input type="text" name="text3" ng-focus="getName($event)">
<input type="text" name="text4" ng-focus="getName($event)">
</form>
</div>
ng-click="(document.getElementById('procheck1').checked)?showme=true:showme=false"
(or)
ng-click="if(document.getElementById('procheck1').checked){showme=true;}else{showme=false;}"
Use some function name like this , ng-click="myFunction()" and write whole condition inside that.
myFunction(){
if(document.getElementById('procheck1').checked) {
showme=true;
} else {
showme=false;
}
}
Try this in html page
<div ng-app="MyApp" ng-controller="MyController">
<label for="chkPassport">
<input type="checkbox" id="chkPassport" ng- model="ShowPassport" ng-change="ShowHide()" />
Do you have Passport?
</label>
<hr />
<div ng-show="IsVisible">
Passport Number:
<input type="text" id="txtPassportNumber" />
</div>
</div>
and this part in controller
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope) {
//This will hide the DIV by default.
$scope.IsVisible = false;
$scope.ShowHide = function () {
//If DIV is visible it will be hidden and vice versa.
$scope.IsVisible = $scope.ShowPassport;
}
});
Here are the code:
I want to get checked radio button value with angularjs click funciton?
<input type="radio" name="calender" value="calender">
<input type="radio" name="calender" value="calender2" checked="checked">
<button ng-click="get_val($event)">Click</button>
$scope.get_val= function(event)
{
}
Here you can add this to get value
var flag_item_val = $("input:radio[name=calender]:checked").val();
Just check out this below code snippet on how to bind values to the ng-model and you can access them anywhere in scope.
var app = angular.module('plunker', []);
app.controller('MainCtrl',
function MainCtrl($scope) {
$scope.radioVal = 'calender2';
$scope.get_val = function(event) {
console.log($scope.radioVal);
}
});
<script data-require="angularjs#1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<div ng-app="plunker" ng-controller="MainCtrl">
<input type="radio" name="calender" value="calender" ng-model="radioVal">
<input type="radio" name="calender" value="calender2" ng-model="radioVal">
<button ng-click="get_val($event)">Click</button>
</div>
I am using a javascript UI library as DHTMLX or YUI etc.
And I am using AngularJS to process dynamic page.
What I need is just simple.
UI code is
...
<Input type="checkbox" name="XXX" />
....
My.js
...
app.controller('XXXCtrl', function($scope){
$scope.$watch(???){
if (XXX) console.log("checkbox was checked!!!");
else console.log("checkbox was unchecked!!!");
????
};
})
I am new to AngularJS. Please help me!!!
You have to bind the value to the scope via ng-model. There is more detail in the documentation, but you can do something like that:
$scope.checkboxModel = true;
$scope.myAction = function () {
msg = $scope.checkboxModel ? 'checked' : 'unchecked';
console.log(msg);
};
And in your HTML file:
<form name="myForm" ng-controller="XXXCtrl">
<label>Value1:
<input type="checkbox" name="XXX" ng-model="checkboxModel" ng-change="myAction()">
</label><br/>
<tt>value1 = {{checkboxModel}}</tt><br/>
</form>
You can access to the window object using document.getElementById combined with ng-click event listener
var app = angular.module('myApp', []);
app.controller('appCtrl', function($scope) {
$scope.checker= function(e){
var chkBox = document.getElementById(e.target.id);
console.log(chkBox.checked)
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='myApp'>
<div ng-controller='appCtrl'>
<input type="checkbox" id="myCheckbox" name="myCheckbox" ng-click="checker($event)"/>
</div>
</div>
I want my controller to perform some action when a user clicks in a form field (when the form field gets focus). How can I do this? See this plunker.
Here is my controller:
angular.module('myApp', [])
.controller('AppCtrl', ['$scope',
function($scope) {
$scope.field1 = "Default text";
$scope.focus = false;
$scope.formFieldJustGotFocus = function() {
$scope.focus = true;
// Do all the stuff I need to happen when the form has just gotten focus
}
}
]);
And here is the view:
<body ng-app="myApp" ng-controller="AppCtrl">
<h3>Testing</h3>
<p>I want to perform some action in the controller when a form field gets focus. How can I best achieve this?</p>
<form name="myForm">
<input type="text" name="field1" ng-model="field1">
</form>
<p>Form field has focus: {{focus}}</p>
</body>
You can use the ngFocus directive. The inverse is ngBlur.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<input type="text" ng-focus="isFocused = true" ng-blur="isFocused = false">
<p ng-if="isFocused">Focus !</p>
</div>
<input type="text" name="field1" ng-model="field1" ng-focus="formFieldJustGotFocus()">
use like this ng-focus
Try ng-focus.
See more info:
https://docs.angularjs.org/api/ng/directive/ngFocus
use -> ng-focus
<input type="text" name="field1" ng-model="field1" ng-focus="formFieldJustGotFocus();">
this plunker
in the code he had written the function formFieldJustGotFocus(), but it was not bound to the focus event