I'm a newbie in angular js, I'm using AngularJs - 1.6.9. I'm using angularjs-bootstrap-datetimepicker directive for date time. This is an easy code for implementation & works fine with default date time format. The issue has come up when I want to change the date time format in Input Field. Here is my working code.
<div class="form-group col-md-2"
ng-class="{'has-error': myForm.edtaDate.$error.required, 'has-success': myForm.edtaDate.$valid }
<label>EDTA</label>
<div class="dropdown date_dropdown">
<a class="dropdown-toggle" id="dropdown1" role="button"
data-toggle="dropdown" data-target="dropdown1" href="#">
<div class="input-group">
<input type="text" required id="edtaDate" name="edtaDate"
class="form-control" data-ng-model="myModel.edtaDate">
<span class="input-group-addon">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<datetimepicker data-before-render="startDateBeforeRender($dates)"
data-ng-model="myModel.edtaDate"
data-datetimepicker-config="{ dropdownSelector: '#dropdown1' }">
</datetimepicker>
</ul>
</div>
</div>
In the above code everything working fine. Let's focus on the issue when I changed the format here is the code:
<input type="text" required id="edtaDate" name="edtaDate"
class="form-control"
data-ng-model="myModel.edtaDate | date:'yyyy-MM-dd HH:mm'">
just using the piping, date time format change but the new issue has occurred, angular "has-error" or "has-success" not work.
Now I want to change the date time format according to my ease with has-error or has-success. i've gone through few suggestions but not working, here is the link: angularJs date formatting on input field change, Change the date time format in angularjs, Change Date input field format in angular and many more but the problem still remains the same. Thanks in advance.
Ideally you shouldn't be binding two input fields to the same model as an update to one field could trigger update hooks on the other which can cause some pretty painful bugs. Additionally, dateTimePicker sets a JSDate object whereas your input field will be text so you may have to parse that input through new Date(myDateInput) depending on what is consuming it.
In the link you provided for angularjs-bootstrap-datetimepicker it specifies that for the config property 'modelType' you can specify a format string in lieu of the preset values
So from what you have provided, the following is what you are looking for:
<datetimepicker data-before-render="startDateBeforeRender($dates)"
data-ng-model="myModel.edtaDate"
data-datetimepicker-config="{ dropdownSelector: '#dropdown1',
modelType: 'yyyy-MM-dd HH:mm' }">
If none of the above works, take a look at the demos provided and see if they help out. See the demo folder for the implementation of that page.
Related
I'm new to Angular and I want to check I am doing form validation right. I want to display an appropriate message when the user has entered more than 100 characters in an input field.
For this I am using $viewValue. Would $modelValue be better for validation since it is what has been 'saved' in the controller? Is there a better way to do this kind of specific validation?
<div class="form-group">
<label for="Forename" class="control-label col-md-2">Forename</label>
<div class="col-md-10">
<input id="forename" type="text" class="form-control"
name="detailsForename"
required
ng-maxlength="100"
ng-model="vm.customer.Forename" />
</div>
</div>
<li ng-show="detailsForm.detailsForename.$error.required">
Forename must be filled in
</li>
<li ng-show="!detailsForm.detailsForename.$valid">
Forename was not valid
</li>
<li ng-show="detailsForm.detailsForename.$viewValue.length > 100">
Forename must be no more than 100 characters
</li>
UPDATE: I had tried vm.person.Forename but for whatever reason it was not working. If it should work I shall revisit that as a possibility.
Using $valid is not enough because if the input field is empty I will get the error message for Required, and for > 100 (because $valid=false)
As noted in the ngMaxlength docs: "The validator sets the maxlength error key if the ngModel.$viewValue is longer than the integer ..."
So in your case that would be: detailsForm.detailsForename.$error.maxlength
You should never need to access an ngModel's $viewValue or $modelValue from the template.
I have built an angular app which searches through a load of objects.
The problem is that the search filters match any part of the string returning irrelevant searches.
for example.
If I search the name Steve
the results will bring up both steve , eve and steven. I want the search results to return steve and steven.
Plunkr:
https://plnkr.co/edit/awN5ZxIpZ3fJJUkD5k6Y
Code
<input id="search-input" ng-model="searchTerm" placeholder="Search">
</div>
<ul class="search-ul">
<li class="search-list" ng-if="searchTerm.length > 2" ng-repeat="item in SearchItems| filter:searchTerm">
<div class="button-wrap">
<img class="icon" src="{{item.image}}" />
</div>
<span class="text">{{item.name}}</span>
</li>
</ul>
Reproducing with an object that only has a name field, I get results as expected ('steve' and 'steven' only). This suggests that it is matching on something other than the name field.
If you want your filter to ONLY use the item.name field then use the following:
<li class="search-list" ng-if="searchTerm.length > 2" ng-repeat="item in SearchItems| filter:{name:searchTerm}">
Please refer Angular material.
https://docs.angularjs.org/api/ng/filter/filter
For strict search you have to tag the object property to search field.
For example to filter name
<input ng-model="searchTerm.name"></label>
<label>Equality <input type="checkbox" ng-model="strict"></label><br>
Also try setting strict
ng-repeat="item in SearchItems| filter:searchTerm:strict"
In an angular project, I have an bootstrap-ui datepicker which is used to provide info on the date when an invoice has been paid.
Initially, upon creating the invoice, as it has not been paid and so I should have an ng-model variable indicating null or something like that :
$scope.invoice.Payment_Date = null
The thing is, it appears that the datepicker needs to have a valid date object to work. When using everything this way, when I select a date in the datepicker to say my invoice has been paid, the datepicker indicates a correct date like Tuesday, February 15 2016, but the ng-model variable remains null.
If I initialize the variable as such :
$scope.invoice.Payment_Date = new Date();
then when changing the datepicker date, the ng-model is updated as it should.
The problem is, I may have to create/update the invoice without saying it has been paid, and doing so, I get a Payment_Date which has the value of the date said invoice has been created/updated.
Is there a way to leave this variable set to null or empty when the datepicker is left untouched and yet having it get the correct datepicker value when it's used ?
Hope someone can help !
Edit : here's the HTML code of the datepicker :
<form name="formFacture" novalidate rc-submit="modifierFacture()">
<div class="form-group">
<label>Date de paiement : </label>
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="dd MMMM yyyy" ng-model="facture.Date_Paiement" is-open="popupDatePaiement.opened" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" close-text="Fermer" clear-text="Effacer" current-text="Aujourd'hui" readonly="readonly" ng-click="openDatePaiement()" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="openDatePaiement()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<div class="container text-center">
<button type="submit" class="btn btn-primary">Enregistrer</button>
<div class="btn btn-primary" ng-click="ChangeLocation('prev', '/#factures')">Retour</div>
</div>
</form>
Here's the JS code :
$scope.facture = {};
$scope.dateOptions = {
startingDay: 1
};
$scope.popupDatePaiement = {
opened: false
};
var openDatePaiement = $scope.openDatePaiement = function() {
$scope.popupDatePaiement.opened = true;
};
$scope.modifierFacture = function(){
console.log($scope.facture);
return
}
After reviewing the code I found that :
I can get a valid date with the datepicker ( there was a slight error with the ng-model ) but if I change the date twice, the facture.Date_Paiement variable stays with the 1st choice, the 2nd choice does not get forwarded to it.
If I use the "clear" button inside the datepicker, the facture.Date_Paiement variable doesn't revert to null
I've tried adding this line :
$scope.Date_Paiement = null
inside the openDatePaiement function, but in this case, the facture.Date_Paiement staus null at all times.
Ok, after hours spent researching the whys of this question, I found an answer.
DO NOT rely on console.log(object) to tell you what is inside the object as it seems the function parsing the object to render it inside the console is bugged !
Instead, use console.log(JSON.stringify(object)) and you'll have the correct values.
My head still aches, what are we to do when such things are bugged ???
I have a form with many fields, including several datepickers (Angular UI Bootstrap).
<div name="mainForm" ng-form>
<div class="form-group">
<p class="input-group">
<input type="text" name="dt"
class="form-control"
ng-model="dt"
is-open="opened"
datepicker-popup="MM/dd/yyyy" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<p class="text-danger" ng-show="mainForm.$invalid">Invalid!</p>
</div>
I'm using Angular validation w/ the form. We have some required fields, but the dates are not. If you enter a date and remove it, it marks the form invalid. I created a Plunkr to demonstrate this.
Is there a way around this?
Note: It also logs this error in the console when you clear the date out.
Datepicker directive: "ng-model" value must be a Date object, a number of milliseconds since 01.01.1970 or a string representing an RFC2822 or ISO 8601 date.
In the current version of the code there is a $datepickerSuppressError value that you can set to true which will hide the console error. You can see in the code that it checks if the date is NaN and then displays the console error if $datepickerSuppressError is still false.
However, having said that, there is still a way to work around the issue of the form being invalid. You will just need to add an additional check to see if mainForm.$error.date is set, or something similar to this.
For example you can change your button to have this instead:
ng-disabled="mainForm.$invalid && !mainForm.$error.date"
Which will leave your button enabled even though the directive has set an error on the date and it should disable if any other field is invalid.
<select class="form-control" data-ng-options="t.name for t in vm.types"
data-ng-model="vm.object.type"></select>
The code above obviously displays a basic dropdown in a standard form-control manner. I've been trying to figure out how to convert this to a button style dropdown using Angular's ui-bootstrap directives but can't seem to get anywhere. Has anyone tried this?
I hope you already found the answer, but maybe someone else will find this useful. The previous answer refers to a common drop down not a button drop down. Here is an example, but without the benefits of hg-option while I didn't use a select but a button.
<div class="input-group">
<div class="input-group-btn" ng-class='{open: open}'>
<button class="btn dropdown-toggle"
data-toggle="dropdown"
ng-click='open=!open'>
Action<span class="caret"></span></button>
<ul class="dropdown-menu">
<li ng-repeat="choice in choices"
ng-click="setChoiceIndex($index);$parent.open =!$parent.open">
{{choice}}</li>
</ul>
</div>
<input type="text" ng-model="choices[index]" class="form-control">
</div>
where choices is an array of strings that will be displayed in the drop down and index is another variable in the controller scope that will reflect the selected choice.
I have created a basic demo of a drop down using angular bootstrap..
Visit :http://plnkr.co/edit/Mfw5zABqPTgLL4DAgAA3?p=preview
Hope this is what your are looking for.