I have an array of months like this
Array[0]
0
:
"January"
1
:
"February"
2
:
"March"
Now I need to show all three values of this array in one input element.
like
How can I do this using angular js. Please help
here's the html
<div class="col-md-4">
<div asterick class="form-group" ng-class="{'form-group has-success': !error['months'] && (submitted), 'form-group has-error': (error['months']) && (submitted)}">
<label for="months">Months</label>
<input type="hidden" name="year" ng-model="data.year" value="">
<input type="text" name="months" id="months" ng-model="data.months" class="form-control" ng-required="true">
<span class="er-block" ng-show="monthlyReportFormPage.months.$touched && monthlyReportFormPage.months.$error.required">Please select months.</span>
<span ng-show="error.months" class="er-block">{{error.months}}</span>
</div>
</div>
There're plenty of options:
I would recommend to take a look at Bootstrap Tags Input.
HTML:
<input type="text" value="html,input,tag" data-role="tagsinput"></input>
CSS:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.css">
JS:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script>
RESULT:
OR jQuery Tags Input Plugin by XOXCO:
OR you can do it using pure javascript. Here's an example.
Hey in case you work with angular 1.X try the ui-select plugin (https://github.com/angular-ui/ui-select/wiki). I think its exactly what you are looking for. Here are some examples https://angular-ui.github.io/ui-select/demo-multiple-selection.html.
best regards Peter
Related
I have a form which has input fields that is dynamically built using ng-repeat. How I can validate these fields are greater than another input field. Please look at this sample code.
<html ng-app>
<head>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body ng-init="weekDays = ['monday', 'tuesday', 'wednesday','thursday', 'friday', 'saturday','sunday']">
<h1>Fun with Fields and ngModel</h1>
<p>days: {{weekDays}}</p>
<h3>Binding to each element directly:</h3>
<div ng-repeat="weekday in weekDays">
Value: {{weekday}}
{{day='day_'+weekday; ""}}
<input name="{{day}}" ng-model="val">
</div>
<div>
Number to validate : <input name="numToValidate">
</div>
</body>
I am very new to angularJS and still learning. However I couldn't able to think through this simple validation. Please help.
Html:
<form name="form">
<div ng-repeat="weekday in weekDays">
Value: {{weekday}}
{{day='day_'+weekday; ""}}
<input name="{{day}}" ng-model="val" required>
</div>
<div>
Number to validate : <input name="numToValidate" required>
</div>
</form>
Script:
if($scope.form.$valid){
// You can write your code here what you want to do after validate.
}
You can use html form element with min attribute to check validity
<input name="{{day}}" ng-model="weekday.val" min="{{numToValidate}}">
you will need seperate model for each of your inputs in your ng-repeat therefore I changed your ng-model with the following
ng-model="weekday.val"
if you do not want to use form you can check the validity of your value with ng-blur directive (triggered when input loses focus).
html
<input name="{{day}}" ng-model="weekday.val" ng-blur="checkValid(weekday.val)">
js
$scope.checkValid = function(value){
if(value > $scope.numToValidate){
alert("please enter a valid number");
}
}
I've been through all of similar/relative topics on ng-maxlength on StackOverflow, but still could not find an answer. My problem is the following snippet of code:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div class="form-group field keywords-input-block">
<label>Keywords</label>
<form name="keywords">
<input class="form-control searchKeywordValidator"
type="text"
placeholder="Enter keywords..."
ng-maxlength="5"
name="keywordInput"
ng-model="vm.jobList.keywords">
<h1 ng-if="!keywords.keywordInput.$valid">The value is too long</h1>
</form>
</div>
The error message, which should be displayed only if the input is invalid, is constantly shown! Any advise on what it the reason for that and how could I get rid of it would be highly appreciated!
All angularjs applications must have a root element in order to allow angularjs to be able to effective on your view. And that is ng-app directive. This directive is to auto-bootstrap an AngularJS application
You must add it somewhere to the root element
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div class="form-group field keywords-input-block" ng-app="">
<label>Keywords</label>
<form name="keywords">
<input class="form-control searchKeywordValidator"
type="text"
placeholder="Enter keywords..."
ng-maxlength="5"
name="keywordInput"
ng-model="vm.jobList.keywords">
<h1 ng-if="!keywords.keywordInput.$valid">The value is too long</h1>
</form>
</div>
Read more about it here
I still have doubt in using ng-mask, I went through most of the web pages for it to work but it still remains the same. And many people told to use it with input tag of angularjs, after doing so Im not able to mask the input.Or am I making mistake please somebody correct me and give the clarity of using the ng-mask.
<input type="tel" name="phoneno" maxlength=13 ng-model="phone.number" ng-mask="(999)999-9999"/>
</div>
<button class="button2" ng-click="home()">Back</button>      
<button class="button3" ng-click="addphone()">Add</button>
Download the ngMask.min.js from net
Call the ngMask.min.js before app.js and Include app.js module
var yourApp= angular.module("yourApp", [
'ngMask'
]);
HTML :
<input type="tel" name="phoneno" maxlength=13 ng-model="phone.number" mask="(999)999-9999" />
Below code is working for me.
I think you should use data-on attribute like below
<input type="text" class="form-control input-small" data-ng-model="zipcode" placeholder="Enter the zip code" data-ng-mask="#####-###" data-on="keyup">
// 2. Add ngMask module dependency to your app.
angular.module('yourApp', ['ngMask']);
<!-- 1. Add ngMask plugin after your AngularJS. -->
<script src="angular.min.js"></script>
<script src='ngMask.min.js'></script>
<!-- 3. Use the avaiable patterns to create your mask. Set the mask attribute. -->
<input type='text' ng-model='maskModel' mask='39/19/9999' />
<!-- 4. Adjust your mask options. -->
<input type='text' ng-model='maskModel' ng-value='0/3/9' mask='3/9?' mask-repeat='2' mask-restrict='accept' mask-clean='true' mask-validate='false' mask-limit='false' />
source: https://github.com/candreoliveira/ngMask/blob/master/README.md
Use ui-mask instead:
<div class="form-group">
<label for="birth-date">Date of birth</label>
<input type="text"
class="form-control"
id="birth-date"
ng-model="formData.date_of_birth"
ng-value="formData.date_of_birth"
ui-mask="99.99.9999"
ui-mask-placeholder
ui-mask-placeholder-char="_"
>
</div>
https://github.com/angular-ui/ui-mask
Why is AngularJS not checking the step="0.01" attribute of the second input? For min and max attributes it works perfectly, but not for the step attribute.
For example: The input 0,005 will evaluate submitNewEntryForm.submitNewEntryAmount.$valid to true, but it shouldn't.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div ng-app="">
<form class="form-inline" name="submitNewEntryForm">
<div class="form-group" ng-class="submitNewEntryForm.submitNewEntrySubject.$valid ? 'has-success' : 'has-error'">
<label for="subject">Betreff:</label>
<input type="text" class="form-control" id="subject" required name="submitNewEntrySubject" ng-model="submitNewEntrySubject">
</div>
<div class="form-group" ng-class="submitNewEntryForm.submitNewEntryAmount.$valid ? 'has-success' : 'has-error'">
<label for="amount">Betrag:</label>
<input type="number" class="form-control" id="amount" required name="submitNewEntryAmount" ng-model="submitNewEntryAmount" step="0.01" min="0" max="99999">
</div>
<button type="submit" class="btn btn-primary" ng-disabled="!(submitNewEntryForm.submitNewEntrySubject.$valid && submitNewEntryForm.submitNewEntryAmount.$valid)" ng-click="">Submit</button>
</form>
</div>
Add regex, like \d+\.\d{0,2}
You can use HTML5 pattern="^\d+\.\d{0,2}$" or ng-pattern="^\d+\.\d{0,2}$". It changes error state without limiting html input to 2 decimal points.
To be strict, you should use ^\d{1,5}\.\d{,2}$
If you want number to have 2 decimal point but allow it to be without leading 0 like .01, you can use ^\d*\.\d{2}$
I didn't realize that there was a Angular directive for the step attribute. If you look at the documentation, it seems to be a very recent addition.
I find no mention of the step attribute until you get to a build of the un-released 1.5.9 version.
Latest version: https://docs.angularjs.org/api/ng/input/input%5Bnumber%5D
Notice in the "Usage" and "Arguments" sections that the step directive is listed. Now use the pull down menu in the upper left to change the version, and observe that there is no mention of the step directive.
Either this is a brand new, unreleased feature... or perhaps the documentation for older versions is not correct :)
I am initilizing a model with a Date function and binding it to an input which has a datepicker.
<label>Begin Date</label>
<div class='input-group date'>
<input ng-model="Main.BeginDate" class="form-control" onkeydown="return false" datepicker-popup="MM/dd/yyyy" show-weeks="false" is-open="BeginDate" ng-focus="BeginDate=true" ng-click="BeginDate=true" min-date="Main.MinDate" required/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
On first click, the datepicker shows the current date even though the actual date is different.
Then on clicking the input again, the datepicker-popup resets to the correct date.
I tried:
Formatting date using $filter
Custom new Date() function
Removing min-date attribute
How do I get the popup to show the date bound to the model?
I am using:
AngularJS v1.5.0
Bootstrap v3.3.6
Angular-ui-bootstrap Version: 0.13.4
First click ------>>>>>
Second click ----->>>>
I checked the situation and seems like the versions that you are using are somehow conflicting. If i use angular 1.4.9 or below and try your code all seems to work. Here is a plunker to show you that. But as soon as I use angular 1.5.0 or above I face the same issue as you. You could use angular 1.4.9 and angular-ui-bootstrap 0.13.4 or upgrade your angular ui bootstrap version.
index.html
<!doctype html>
<html ng-app="app">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.4.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="DateCtrl" style="padding:40px">
<label>Begin Date</label>
<div class='input-group date'>
<input ng-model="dt" class="form-control" onkeydown="return false" datepicker-popup="MM/dd/yyyy" show-weeks="false" is-open="BeginDateOpen" ng-focus="BeginDateOpen=true" ng-click="BeginDateOpen=true" min-date="Main.MinDate" required/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</body>
</html>
example.js
angular.module('app', ['ui.bootstrap']);
angular.module('app').controller('DateCtrl', function ($scope) {
$scope.today = function(){
$scope.dt = new Date(1998,1,5)
}
$scope.today();
});
As mentioned by #Amit, the issue seems to be because of the incompatibilities between the versions of the libraries.
Based on the bug mentioned here, the solution to add atttribute init-date worked.
<input ng-model="dt" class="form-control"
onkeydown="return false" datepicker-popup="MM/dd/yyyy" show-weeks="false"
is-open="BeginDateOpen" ng-focus="BeginDateOpen=true" ng-click="BeginDateOpen=true"
min-date="Main.MinDate" required
init-date="dt"/>
Here is a plunker