I have the following code:
<input class="form-control"
uib-datepicker-popup="dd.MM.yyyy"
ng-readonly="!isEditable"
datepicker-append-to-body="true"
ng-model="logicalDepotVo.rtCreationDate"
is-open="isDatepickerOpen"
placeholder="Enter Creation Date"
ng-click="isEditable ? onCreationDateDatepickerClick() : ''"/>
The value does not view value of model, but bind model works as ng-model. When I removed uib-datepicker-popup, all works fine. I tried to remove custom format, play with other attributes, but have no any successful result. Maybe, somebody has an idea what should be done?
Probably this could explain your issue (check you ng-model for correct date format):
ng-model - The date object. Must be a Javascript Date object. You may use the uibDateParser service to assist in string-to-object conversion.
angularjs bootstrap
Related
I have created dynamic form, here I want to send form data to controller. How can do this?
Here is plunker code link https://plnkr.co/edit/xmxDJHTPfJoSFwa2FWCB?p=preview
Issues:
when I change the value then element label also change.
How can I get the form data in product_submit function of controller.
All response appreciated.
Use
<input type="text"
id="module_module"
ng-model="getCol.value"
required="required"
class="form-control col-md-7 col-xs-12"
placeholder="Enter {{getCol.Field}}"
/>
Look here ng-model="getCol.value". You are using filed name as text field model value. Filed name and value are different. That is what you want I suppose.
You can access the values easily from your controller as $scope.getColumn[1].value. Change index or iterate accordingly.
Plunker here
To solve label issues, in your html, I changed ng-model expression to bound into getColumn.Value
In controller, I can read value entered in scope.getColumn[i].Value
I also updated code https://plnkr.co/edit/KlhAb69seMzHsLuhqweR?p=preview
I have an input type email that I validate against my own custom regular expression. It in turn is bound to an angular model something like:
js
$scope.user = {};
html
<input type="email" ng-model="user.email" />
I would like for the email to allow apostrophes but the email doesn't bind to the model unless it passes the built in html5 validation. I'd like to override or switch off this validation since I have my own custom regex in place.
I've tried adding the novalidate tag to the form wrapper and also adding a pattern to the input but not getting anywhere. Please see jsfiddle:
http://jsfiddle.net/HB7LU/19499/
Any ideas greatly appreciated
C
EDIT: The reason I'm not using type="text" is because I want the email keyboard set to be there when accessing from mobile.
Angular do not support the apostrophe(') in email Id , if need to valid the apostrophe in angular, need to change in angular file regular expr
(/^[A-Za-z0-9._%+-]+#[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/)
to
/^[A-Za-z0-9._%+'-]+#[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/.
It will Work perfectly.
If you already have a regex for validation, you could set the type of the input tag to "text" so that then it would not do any validation and then the regex you have already created could be used to do the validation you want. Also, this will allow you to change the validation method if you ever decide to change how you want validation to work.
Here's the tag:
<input type="text" ng-model="user.email" />
If you read following Angularjs validations, you understand that:
Message will appear if user interacted and did not fill the date manually.
The problem is when date is filled using the datepicker the input is not recognized by Angularjs and still consider $invalid true, so the message remains there which is confusing/problem although date is already filled using datepicker!
<div class="form-group" ng-class="{ 'has-error' : AddForm.Birthdate.$invalid && !AddForm.Birthdate.$pristine }">
<input type="text" required data-provide="datepicker" class="form-control" name="Birthdate" ng-model="Birthdate" />
<span ng-show="AddForm.Birthdate.$invalid && !AddForm.Birthdate.$pristine" class="help-block" >
Birthdate is required.
</span>
</div>
You can either validate it prior to form submit, or else hook a listener on your datepicker to manually set the model property Birthdate value.
It seems bootstrap datepicker is built on top of JQuery datepicker, manually setting the value would be a bad practice you can refer to:
Update Angular model after setting input value with jQuery
a better approach would be to use some built-in angular component such as the ones from:
https://angular-ui.github.io/bootstrap/
http://dalelotts.github.io/angular-bootstrap-datetimepicker/
https://github.com/dalelotts/angular-bootstrap-datetimepicker
I discovered a new way for this problem-
First of all create an id for that input box and then create a function say $scope.assign(), which simply assign the id value to the model of that input.
Something Like this-
$scope.assign = function() {
$scope.modelValue = $('#idName').val();
}
Now use ng-bind="assign()" to your input box.
It worked for me :)
Was facing the issue, and its because of the picker you are using is built on top of Jquery which remains undetectable by the scope on update.
For my new project I have added another library and its pretty awesome.
See the documentation http://dalelotts.github.io/angular-bootstrap-datetimepicker
Providing the piece of code for which I have added a wrapper directive
My Previous Answer was based on work around and because at that time of answer I was pretty new to the angular and now instead of that I will recommend, not to use an library which is built on top of Jquery in Angular project. Instead prefer angular libraries.
Coming on the topic-
For date time picker I found one very good library
https://github.com/indrimuska/angular-moment-picker
You can find more libraries in built in angular, but I found it pretty useful for other validations too like min-date, max-date validation.
Using this library will solve the issue of validation for sure and its pure Angular way.
so I am trying to bind value for input of type date..
Here is my AngularJS code that I am trying to bind the value to:
$scope.date = new Date();
$scope.dateString = dateFilter($scope.date,'dd-MM-yyyy');
And html:
<input class="date" type="date" ng-bind="dateString">
What I am trying to do, is I am trying to set default value to todays date. However, when I am loading my page, it just gives me following result:
<input class="date ng-binding" type="date" ng-bind="dateString">08-04-2015</input>
Any help will be more than welcome :)
Thanks,
uksz
You need to be using version 1.3 or higher for date support. you also want to use ng-model instead of ng-bind, because ng-bind is one way only
I have found an issue with validation of a manually typed date value that falls outside of the minDate or maxDate values when using the datepicker-popup.
This can be demonstrated with the datepicker popup on the angular ui site by following the steps below: http://angular-ui.github.io/bootstrap/#/datepicker
Ensure the min date option is turned on (min date should equal today)
Type in yesterdays date to the datepicker-popup
This shows a red border around the inline datepicker (as it is flagged as ng-invalid-date) however the input box for the datepicker-popup is still valid.
On further investigation it seems that the ng-invalid-date attribute has been set against the popup part of datepicker and not against the input box. This causes issues because firstly, the user cannot see that the element is invalid and secondly the popup does not have a name property so I am unable to check validity from the ng-form (e.g. myForm.myDate.$invalid
Does anyone know any way around this?
You can do an additional validation on ng-change for the text field and setValidity of that field to false to achieve what you want. Here is a plunker that demonstrates the idea.
http://plnkr.co/edit/N9Hk9QFIfj3IXfHoWwbt?p=preview
I added a little css styling to get the red border to show when the field is invalid. The validity test is very basic; you'd want to enhance it to allow the current day.
If you have the input set up like this, <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="date" is-open="open" datepicker-options="datePickerDateOptions" close-text="Close" ng-change="change()" />
then in your controller you can check what $scope.date is in your $scope.change() function. If $scope.date is undefined then its not valid. If its null then its empty. Anything else is a valid date.