I only need to show the span if the user input value is greater than 1 and the input field doesn't contains the values defined in the regular expression.
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-ng-form-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script type="text/javascript">
angular.element(document.getElementsByTagName('head')).append(angular.element('<base href="' + window.location.pathname + '" />'));
</script>
</head>
<body ng-app="formExample">
<script>
angular.module('formExample', [])
.controller('FormController', ['$scope', function($scope) {
$scope.userType = '';
$scope.regex = "#%<;'=";
}]);
</script>
<form name="myForm" ng-controller="FormController" class="my-form">
userType:
<input name="input" ng-model="userType" ng-pattern="regex && userType">
<span ng-show="userType && myForm.input.$valid">show me!</span>
<br>
</form>
</body>
</html>
Plunker Demo
If you need a entry without your regex pattern, you need a exclusion mask:
$scope.regex = "[^#%<;'=]*";
And use a not conditional mask on pattern:
<input name="input" ng-model="userType" ng-pattern="regex">
plunker here
ng-pattern only validates regular expression. So inside ng-pattern there should be just pattern. At the time of showing message check the userType and the other form property inside ng-show or ng-hide. That's all.
<form name="myForm" ng-controller="FormController" class="my-form">
userType:
<input name="input" ng-model="userType" ng-pattern="regex">
<span ng-show="userType && !myForm.input.$error.pattern">show me!</span>
<br>
Related
I'm learning Angular.js. I want to make a form where the user can see the output has they fill it out.
Here's test.html:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0-rc.2/angular.js"></script>
<script src="test.js"></script>
</head>
<body ng-app="charter">
<div id="layout-wrapper" ng-controller="graphicLanguageCTRL">
<form id="graphic-language" ng-controller="graphicLanguageCTRL" novalidate>
<h3>Language</h3>
<input type="text" name="headline" placeholder="Headline" ng-model="graphic.hed"> <br>
</form>
</div>
<h1 class="graphic-title" ng-bind="graphic.hed"></h1>
</body>
Here's test.js:
var app= angular.module("charter",[]);
app.controller("graphicLanguageCTRL",function($scope){
$scope.master= {
hed: ''
};
});
I want the stuff typed into the input tag to be visible in the h1 tag. But when I type into the input tag, nothing appears in the h1 tag.
How do I fix this?
There are some errors in your code:
You are using ng-bind outside of controller
You are initializing graphicLanguageCTRL twice
In your script you are setting the wrong variable name
Below is the fixed code:
html
<body ng-app="charter">
<div id="layout-wrapper" ng-controller="graphicLanguageCTRL">
<form id="graphic-language" novalidate>
<h3>Language</h3>
<input type="text" name="headline" placeholder="Headline" ng-model="graphic.hed"> <br>
</form>
<h1 class="graphic-title" ng-bind="graphic.hed"></h1>
</div>
</body>
JS
var app = angular.module("charter",[]);
app.controller("graphicLanguageCTRL", function($scope){
$scope.graphic = {
hed : ''
};
});
var app = angular.module("charter",[]);
app.controller("graphicLanguageCTRL",function($scope){
$scope.graphic = {
hed: ''
};
});
or
var app = angular.module("charter",[]);
app.controller("graphicLanguageCTRL",function($scope){
$scope.graphic = {};
$scope.graphic.head = ''
});
2 things need to be taken care of:
Do not nest and use the same ng-controller
Move the h1 inside
the ng-controller block
Fixed version:
var app = angular.module('charter', []);
app.controller("graphicLanguageCTRL", function($scope) {
$scope.graphic = {
hed: ''
};
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0-rc.2/angular.js"></script>
<meta charset="utf-8">
<title>test</title>
</head>
<body ng-app='charter'>
<div id="layout-wrapper" ng-controller="graphicLanguageCTRL">
<form id="graphic-language" novalidate>
<h3>Language</h3>
<input type="text" name="headline" placeholder="Headline" ng-model="graphic.hed">
<br>
</form>
<h1 class="graphic-title" ng-bind="graphic.hed"></h1>
</div>
</body>
</html>
I have a custom directive with an input box. This input is used in many of the pages. I want to require this input field in some of the forms and exclude in others. What should be the best approach to do this?
I am submitting the form from controllers so not sure how this would work in angular?
I am new to angular and not sure how this all will be tie up together.
So essentially this is what I want :
<form name="myForm" >
<div ng-contoller="Somecontroller as vm" >
<custom-directive>
this will create an input box like this :
<input type="text"> </input>
</custom-directive>
</div>
</form>
When I submit the form I want to ensure that if the text box inside the directive does not have text then I should get an error.
Hi, this is your custom directive, with this example you can handle what you want...also you can use directive in all you form but remember do not use with same ngModel, and last one thing always set ngModel in this directive.
var app = angular.module("app", []);
app.directive("requiredInput", function () {
return {
restrict: "E",
required: "^ngModel",
template: "<input type='text' ng-model='ngModel' ng-required='true'>",
scope: {
ngModel: "="
}
}
})
<!DOCTYPE html>
<html ng-app="app">
<head>
<title></title>
</head>
<body>
<h1>form 1</h1>
<form name="form">
<required-input ng-model="form.myInput"></required-input>
<required-input ng-model="form.myInput2"></required-input>
{{myInput}}
<button ng-disabled="form.$invalid">submit</button>
</form>
<h1>form 2</h1>
<form name="form2">
<required-input ng-model="form2.myInput"></required-input>
{{myInput2}}
<button ng-disabled="form2.$invalid">submit</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp">
<w-test-directive></w-test-directive>
<script>
var app = angular.module("myApp", []);
app.directive("wTestDirective", function() {
return {
template : "<input type='text'/>"
};
});
</script>
</body>
</html>
This is a problem that can be easily done by declaring a scope function but I was wondering if there is a better way to make this easier
The code is:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body ng-controller="myCtrl">
<input type="checkbox" ng-model="activate" id="activate"> ACTIVATE <br />
<input type="text" ng-model="first" ng-disabled="!activate">
<input type="text" ng-model="second" ng-disabled="!activate">
<!-- <span id="clickMe">Click Me!</span> -->
<script type="text/javascript">
app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout){
});
</script>
</body>
</html>
So this is the case. The other two fields will be enabled if the checkbox is checked and true and will be disabled if the checkbox is unchecked. What I want is, to make the fields go null or blank automatically upon disabling.
Here is an example: http://plnkr.co/edit/2EPuhRiR9OncV8z7q018?p=preview
Ignoring the fact that it is not a good practice to put too much logic directly in the view, a technical solution would be:
<input type="checkbox" ng-model="activate" id="activate" ng-change="sameAsAbove(first, second); value = null"> ACTIVATE <br />
<input type="text" ng-model="value.first" ng-disabled="!activate">
<input type="text" ng-model="value.second" ng-disabled="!activate">
I try to make disable second field until I do not enter 'Lokesh' in first field for that I have tried below code I am in learning stage of angularjs so please correct me where I am doing mistake.
eg.code
<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<p>Enter 'Lokesh' to display last name</p>
<div ng-app="myApp" ng-controller="myCtrl">
<input data-ng-model="firstName"
type="text"
ng-disabled="{if(firstName="lokesh")}"
Last Name: <input type="text" ng-model="lastName"><br>
/>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.lastName= "Kumar Gaurav";
});
</script>
</body>
The problem is with the attribute ng-disabled="{if(firstName=" lokesh ")}"
There is no need of using if, you can directly compare the strings.
Update the code as
ng-disabled="firstName=='lokesh'"
Demo
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<div ng-app>
<input data-ng-model="firstName" class="span12 editEmail" type="text" placeholder="Type lokesh here" />Last Name:
<input type="text" ng-model="lastName" ng-disabled="firstName!=='lokesh'" />
<br>{{firstName}}
</div>
Here is a simple code, where I tried to implement what I'm talking about:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example32-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.0/angular.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller="AppController">
<form name='AlertForm' ng-init="action = 'AlertForm.$valid && print(text)'">
Input: <input type="text" ng-model="text" ng-keyup='$event.keyCode == 13 && {{action}}' /><br />
<input type="button" ng-click="{{ action }}" value="Alert" />
</form>
</div>
<script>
angular.module('app', [])
.controller('AppController', ['$scope', function($scope) {
$scope.print = function(msg) {
alert(msg);
};
}]);
</script>
</body>
</html>
http://plnkr.co/edit/M7hfHytCzqrOMMLSpbZm?p=preview
There is a form with a single input and a button. If you press the button or press enter, while staying in the input, it will alert you with content of the input.
I've tried to use ng-init and Angular templating for caching the print(text) expression, to avoid redundancy, but it doesn't work.
Is there any other ways, to do that without touching controller?