I want to display error message in label on click if the textbox is empty or undefined using AngularJS.
I am very beginner into AngularJS.
Please help to solve this issue.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
</head>
<body ng-app="form">
<div ng-controller="formController">
<label>Name: <input type="text" ng-model="user.name" /></label><br />
<input type="submit" ng-click="update(user)" value="Save" />
<pre>{{master | json}}</pre>
</div>
<script>
angular.module('form', []).controller('formController', ['$scope', function ($scope) {
$scope.master = {};
$scope.update = function (user) {
debugger;
$scope.master = angular.copy(user);
if (user == undefined) {
debugger;
alert("Please enter text");
}
};
}]);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<h2>Validation Example</h2>
<form ng-app="myApp" ng-controller="validateCtrl"
name="myForm" novalidate ng-submit="Validate()">
<p>Username:<br>
<input type="text" name="user" ng-model="user" required>
<span ng-show="ShowUserNameError">Username is required.</span>
</span>
</p>
</p>
<p>
<input type="submit" ng-click="Validate()">
</p>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
$scope.ShowUserNameError = false;
$scope.user = '';
$scope.email = '';
$scope.Validate = function(){
if(!$scope.user)
$scope.ShowUserNameError = true;
else
$scope.ShowUserNameError = false;
}
});
</script>
</body>
</html>
Enclose the input in a named form, name the input, and use ng-show:
<div ng-controller="formController">
<form name="form1">
<label>Name: <span ng-show="form1.item1.$error">{{form1.item1.$error}}</span>
<input name="item1" type="text" required ng-model="user.name" />
</label><br />
<input type="submit" ng-click="update(user)" value="Save" />
<pre>{{master | json}}</pre>
</form>
</div>
For more information, see
AngularJS <form> Directive API Reference - Example
AngularJS Developer Guide - Forms
Related
I am trying to make a text field appear and disappear based on the selection of a list box.
Unfortunately, I am not able to do so and box appears without being hidden.
I would appreciate any help in this.
I am putting this as HTML file in google script opening in side bar.
HTML file
<!DOCTYPE html>
<script>
loadSelectList();
function loadSelectList() {
google.script.run.withSuccessHandler(function(ar) {
let select = document.createElement("select");
select.id = "CompNameID";
select.name = "CompName"; // Added
select.required = "required";
// select.setAttribute("onchange", "selected()");
document.getElementById("CompNM").appendChild(select);
ar.forEach(function(e, i) {
let option = document.createElement("option");
option.value = e;
option.text = e;
document.getElementById("CompNameID").appendChild(option);
});
}).getCompanyFromSpreadsheet();
};
function selected() {
const value = document.getElementById("select1").value;
console.log(value);
}
$("#CompNameID").change(function() {
if ($(this).val() == "Other") {
$('#OtherCompName').show();
$('#otherField1').attr('required', '');
$('#otherField1').attr('data-error', 'This field is required.');
} else {
$('#OtherCompName').hide();
$('#otherField1').removeAttr('required');
$('#otherField1').removeAttr('data-error');
}
});
$("#CompNameID").trigger("change");
</script>
<html>
<head>
<base target="_top">
</head>
<body>
<hr /><b>Please fill in the form and hit submit</b><br><hr /><br>
<form id="myForm" onsubmit="google.script.run.withSuccessHandler(google.script.host.close).paddProject(this)">
<input type="hidden" name="rowNUM" required="required" value=<?= rawnumber ?>>
<input type="hidden" name="recID" required="required" value=<?= recordid ?>>
<input type="hidden" name="TimeStamp" required="required" value=<?= timestamp ?>>
<label><b>Company:</b></label><br>
<div id="CompNM" class="dropdown-content"></div><br>
<div id="OtherCompName" class="otheroption-field">
<label for="otherField1"><b>Group: Heres One!</b></label>
<input type="text" id="otherField1">
</div><br>
<label><b>Short Description:</b></label><br>
<textarea name="ShortDesc" cols="35" rows="1" required="required"></textarea><br><br>
<label><b>Detail Description:</b></label><br>
<textarea name="DetailDesc" cols="35" rows="10" required="required"></textarea><br><br>
<label><b>Notes:</b></label><br>
<textarea name="Notes" cols="35" rows="10"></textarea><br><br>
<label><b>MSA Link:</b></label><br>
<input type="url" name="MSALink"><br>
<br><br><br>
<input type="submit" value="Submit">
</form><br>
<input type="button" value="Cancel" onclick="google.script.host.close()" />
</body>
</html>
During "ng-show" the text is not appearing on gui. Help me to say what is wrong in the code.
<div ng-app="myApp" ng-controller="myCntrl">
<form name="nishant" ng-submit="submit()">
<div>
Name : <input type="text" name="name" ng-minlenght="5"
required="required"> <span
ng-show="nishant.name.$error.minlength">required12</span>
</div>
<button name="button" type="submit">SUbmit</button>
</form>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myCntrl", function($scope) {
alert("nishant");
$scope.submit = function() {
alert("in the submit");
}
});
</script>
</div>
Please see why ng-show is not appearing in the screen. If i am removing my controller it is appearing.
Update:
Final Code for showing messages using ng-show.
JSFiddle Demo
Answer:
You need to add a ng-model for using the form validators (nishant.name.$error.minlength). Also you have misspelt ng-minlength.
var app = angular.module('myApp', []);
app.controller('MyController', function MyController($scope) {
//alert("nishant");
$scope.submit = function() {
alert("in the submit");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller='MyController' ng-app="myApp">
<form name="nishant" ng-submit="submit()">
<div>
Name :
<input type="text" name="name" ng-minlength="5" required="required" ng-model="name"> <span ng-show="nishant.name.$error.minlength">required12</span>
</div>
<button name="button" type="submit">SUbmit</button>
</form>
</div>
I`m using Angualr for my web.
I have this part in html code:
<div class="form-group">
<div class="text-form" style="float: left;">Companion URL</div>
<input type="text" placeholder="Companion URL" class="companion-url-box" ng-model="newCreative.companionUrl">
</div>
I want to add method (in the Controller) that when the text change, it will add a new button down.
How can I do it? I can`t understand how ng-change works.
thanks
Simply use ng-if to check if newCreative.companionUrl exists in scope :
<div class="form-group">
<div class="text-form" style="float: left;">Companion URL</div>
<input type="text" placeholder="Companion URL" class="companion-url-box" ng-model="newCreative.companionUrl">
<input type="button" value="Click me" ng-if="newCreative.companionUrl">
</div>
You can also use a function to validate button visibility :
index.html
<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="scripts.js"></script>
</head>
<body ng-controller="SampleController as ctrl">
<div class="form-group">
<div class="text-form" style="float: left;">Companion URL</div>
<input type="text" placeholder="Companion URL" class="companion-url-box" ng-model="newCreative.companionUrl">
<input type="button" value="Click me" ng-if="ctrl.isButtonAvailable()">
</div>
</body>
</html>
script.js
angular.module('app', []);
angular.module('app').controller('SampleController', function ($scope) {
var ctrl = this;
ctrl.isButtonAvailable = function() {
if(!$scope.newCreative) {
return false;
}
// Ensure companion url starts with https:// using a regular expression
return /^https:\/\//.test($scope.newCreative.companionUrl);
}
});
Working example
Check out this Plunker : https://plnkr.co/edit/n8VtJrenePGf9hCbmzWJ
You can use the directives ng-change on input and ng-if or ng-show on button, plus a little code on controller.
Check this:
http://codepen.io/mQuixaba/pen/oZqXWG?editors=1111
HTML:
<div ng-app="myApp" ng-controller="MyController">
<label for="input">Text:</label>
<input type="text" id="input" ng-model="text" ng-change="showButton=true"/>
<button ng-if="showButton" ng-click="hideButton()">My Button</button>
</div>
JS:
angular
.module('myApp', [])
.controller('MyController', function($scope){
$scope.showButton = false;
$scope.text = "My text";
$scope.hideButton = function() {
$scope.showButton = false;
}
});
How to store multiple form data in local storage, I am trying to store multiple forms data in local storage in angular js. i tried following code:
<form name="welcome">
<input type='text' ng-model='pageData.field1' />
<input type='text' ng-model='pageData.field2' />
<input type='text' ng-model='pageData.field3' />
</form>
<form name="registration">
<input type='text' ng-model='pageData2.field1' />
<input type='text' ng-model='pageData2.field2' />
<input type='text' ng-model='pageData2.field3' />
</form>
<form name="sendMail">
<input type='text' ng-model='pageData3.field1' />
<input type='text' ng-model='pageData3.field2' />
<input type='text' ng-model='pageData3.field3' />
</form>
<script>
myApp.service('dataService',function(){
var cache;
this.saveData = function(data){
cache = data;
};
this.retrieveData = function(){
return cache;
};
});
myApp.controller('Ctrl1', function($scope, dataService){
dataService.saveData($scope.pageData);
});
myApp.controller('Ctrl2', function($scope, dataService){
$scope.pageData = dataService.retrieveData();
});
</script>
<!DOCTYPE html>
<html ng-app="testapp" >
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div ng-controller="Ctrl1">
<form name="welcome">
<input type='text' ng-model='pageData1.field1' />
<input type='text' ng-model='pageData1.field2' />
<input type='text' ng-model='pageData1.field3' />
<input type="button" value="welcomeBTn" ng-click="welcomeTo(pageData1);" />
</form>
</div>
<div ng-controller="Ctrl2">
<form name="registraitonForm">
<input type='text' ng-model='pageData2.field1' />
<input type='text' ng-model='pageData2.field2' />
<input type='text' ng-model='pageData2.field3' />
<input type="button" value="regBTn" ng-click="registration(pageData2);" />
</form>
</div>
<div ng-controller="Ctrl3">
<form name="mailToForm">
<input type='text' ng-model='pageData3.field1' />
<input type='text' ng-model='pageData3.field2' />
<input type='text' ng-model='pageData3.field3' />
<input type="button" value="mailBtn" ng-click="mailTo(pageData3);" />
</form>
</div>
<script type="text/javascript">
var app = angular.module('testapp', []);
/*main controller at index page*/
app.service('dataService',function(){
var self = this;
self.saveData = function(key, data){
localStorage.setItem(key, JSON.stringify(data));
};
self.retrieveData = function(key){
return JSON.parse(localStorage.getItem(key));
};
return self;
});
app.controller('Ctrl1', function($scope, dataService){
$scope.welcomeTo = function(pageData1){
dataService.saveData('page1', pageData1); // like this pass the key of the value to be stored in local storage
}
});
app.controller('Ctrl2', function($scope, dataService){
$scope.registration = function(pageData2) {
dataService.saveData('page2', pageData2);
console.log($scope.pageData2) // like this pass the key of the value to be stored in local storage
}
});
app.controller('Ctrl3', function($scope, dataService){
$scope.mailTo = function(pageData3) {
dataService.saveData('page3', pageData3);
console.log($scope.pageData3)// like this pass the key of the value to be stored in local storage
console.log(dataService.retrieveData('page1'))
}
});
</script>
</body>
https://plnkr.co/edit/kmBA3Cco8QNDL8i4eOjz?p=preview working plunker for you.
Unable to focus on textbox on button click:
<html ng-app="CommonApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-controller="HeadCtrl" ng-init='username=""'>
<input id="UserName" type="text" class="login_boxdecor" ng-model="username" />
<div class="login_btn_outer">
<div class="login_btn_outer2" ng-click="cLgn();">
<a class="btn">Login</a>
</div>
</div>
</body>
</html>
var myApp = angular.module('CommonApp', []);
myApp.controller('HeadCtrl', function($scope){
$scope.cLgn= function(){
if($scope.username.trim().length==0)
{
//Here How to focus my textbox
}
};
});
<html ng-app="CommonApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-controller="HeadCtrl" ng-init='username=""'>
<input id="UserName" type="text" class="login_boxdecor" ng-model="username" />
<div class="login_btn_outer">
<div class="login_btn_outer2" ng-click="cLgn();">
<a class="btn">Login</a>
</div>
</div>
</body>
</html>
var myApp = angular.module('CommonApp', []);
myApp.controller('HeadCtrl', function($scope){
$scope.cLgn= function(){
if($scope.username.trim().length==0)
{
document.getElementById("UserName").focus();
}
};
});
You can use angular.element to select your input box and can call focus(). Try something similar to below::
<html ng-app="CommonApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-controller="HeadCtrl" ng-init='username=""'>
<input id="UserName" type="text" class="login_boxdecor" ng-model="username"/>
<div class="login_btn_outer">
<div class="login_btn_outer2" ng-click="cLgn();">
<a class="btn">Login</a>
</div>
</div>
</body>
</html>
var myApp = angular.module('CommonApp', []);
myApp.controller('HeadCtrl', function($scope){
$scope.focusText =false;
$scope.cLgn= function(){
if($scope.username.trim().length==0)
{
angular.element("#UserName").focus();
}
};
});