Comments (12)
Hi! Thanks for the report. I will take a look at this issue.
from angular-input-modified.
I've created a Plunk that uses DatePicker and TimePicker from AngularUI Boostrap library. Here it is: http://plnkr.co/edit/EWWA8qmc1HYSGnFcTveh?p=preview. Please check it and let me know if it works for you or if you still have a problem.
from angular-input-modified.
I've dug into your code and I think I've managed to understand the issue.
input-modified
is designed around standard HTML5 form elements. When you are using a TimePicker directive, you are effectively adding two elements to the page: one for hours input and one for minutes. So no ngModel
controller for entire Date element is created and therefore input-modified
has no controller to operate on.
You can solve this problem by creating an input[type="date"]
element to hold the date selection (like in my example above). Or you can create an input[type="hidden"]
element if you don't want to display date itself. Both of these solutions will help to provide ngModel
for your date. The following Plunk will demonstrate how to use hidden element: http://plnkr.co/edit/MrtItX3gejPwgitfexy4?p=preview
I hope it helps, cheers!
from angular-input-modified.
I looked at your Plunks and saw that you were fixing the behavior I reported. Unfortunately that there is another issue that I have encountered using timepicker, that is not caused by your module. When you have the Date object is not created at startup (i.e. created after an HTTP request) timepicker defaults to creating a Date object based on the current time. Then once the model object is created input-modified sees the hour and minute models as modified.
Here is a Plunk that demonstrates this using $timeout to simulate an $http request.
http://plnkr.co/edit/Yn5ABCIb21XxLEBKaB6a?p=preview
from angular-input-modified.
Yes, I see the problem here. You can always call a $setPristine
method on either ngModel
or form itself, but these two inputs add itself to the list of modified models and we can't control them because they don't have a name. I will see how I can improve integration with this component. Any good ideas will be much appreciated.
from angular-input-modified.
Hey there! I've update module to version 1.2.0
. Now, it has a configuration provider. Use it to disable automatic initialization by calling disableGlobally()
. After that you can manually add bs-modifiable
attribute to input elements of your forms to enable modifiable behavior on them. It should solve you problem. Please see new example: http://betsol.github.io/angular-input-modified/bootstrap-ui-date-and-time/. Let me know if it resolves the issue. Thanks.
from angular-input-modified.
It resolves the first part of the issue. On load the timepicker fields are no longer marked as modifiable, but I have not been able to figure out how to set them as modifiable once I have the initial data.
One way that could work is if I could call enableGlobally from inside of the relevant controller.
from angular-input-modified.
There are at least three solutions to your problem. I'm putting them here in the order of preference.
1). If you are using ngRoute
then you should probably load all the model data before initializing the controller. You can do this using resolve
property of the routeProvider
. Please see the docs: https://docs.angularjs.org/api/ngRoute/provider/$routeProvider.
2). If you are not using ngRoute
or you really need to load data after controller and view are initialized then you should use ngIf
directive on <form>
element to delay actual initialization of the form. Please see this example: http://plnkr.co/edit/oASUWBSA8CqgodyQ57Bf?p=preview.
3). If for some reason previous solutions are not working for you, then you can resolve to the following trick. After data is loaded you should call $setPristine()
method that will make the form pristine and unmodified. But, you should do this after $scope
model is changed and digest cycle is complete. To do so, you can run this method inside of $timeout
with minimal delay. See the example: http://plnkr.co/edit/tWXi0ooVev6jG2cMUuY2?p=preview.
I hope this will help.
If you think that module can be changed to better handle such scenarios - I'm always looking for good ideas.
Cheers!
from angular-input-modified.
#2 worked for me. I am using ui-router and so couldn't do #1. I am disappointed in myself for not thinking of using an ngIf to fix it.
As for suggestions I think it could be helpful to be able to enable/disable modifiable behavior from the controller instead of just in the configuration, but it may not be needed.
Thanks for all the help.
from angular-input-modified.
You are welcome!
By the way ui-router
also supports resolving, see: https://github.com/angular-ui/ui-router/wiki#resolve.
If you have any other questions or issues with the library, feel free to ask. Also take a look at this library as well: https://github.com/betsol/angular-form-validation.
from angular-input-modified.
We already wrote a custom validation directive because our validation is somewhat specific. For example on a number field you could have min and max values of 30 and 5000 but the only valid inputs are in steps of .125. So 30.125 is valid but 30.12 is not. I do not think your validation module supports that.
from angular-input-modified.
Our validation module is just helping you to decorate the fields and render error messages automatically. Any constraints with custom logic can be added separately.
from angular-input-modified.
Related Issues (20)
- Add support for CommonJS HOT 5
- ngModel directive is not triggered HOT 6
- Compare Types HOT 3
- bs-modfiable seems to not behave as expected HOT 2
- add license to bower.json file HOT 1
- Add support for ngTagsInput HOT 3
- Angular 2 support? HOT 6
- TypeError: Cannot read property '$$notifyModelModifiedStateChanged' of null HOT 2
- It's not working for Text-Angular . HOT 1
- How to eanble this script on a specific form ? HOT 4
- "Ghost modified control" HOT 1
- Issues with input type=email HOT 1
- Bug with angular 1.6.1 HOT 5
- TypeError: Cannot read property '$$notifyModelModifiedStateChanged' of null
- Property `modified` on parentform not updated when childform was removed HOT 4
- $$onChildModelModifiedStateChanged HOT 3
- How do I know why the form is marked as modified? HOT 4
- Console Error HOT 5
- Modified state gets screwed when a subform is toggled HOT 1
- Modified state based on $viewValue instead of $modelValue ?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular-input-modified.