I am trying to write a custom Angular validator for Kendo-UI datepicker component. I have written the validation function and hooked it up to the kendo-datepicker HTML component.
The issue is that if any fields are missing, the FormControl passed to the validator will have null as its value. If MM/dd/yyyy are all there, it has the actual date object.
I would like my validator to error out if one or two MM/dd/yyyy components are missing, but not all three (ie when the user has cleared/not touched the component).
Related
I have a problem on my current MVC (DotNet) application.
My form is render with classic MVC and inside it another "form" with react-final-form.
I need to validate a field in my react form base on a field rendered in the MVC form (so outside react-final-form). When the MVC field change, i would like to trigger the validate function in the react form.
Here is a codesandbox with the problem : https://codesandbox.io/s/validation-with-external-dependencies-g67d8
To reproduce, just check the Required checkbox and submit. Normally, this should fail. But as the validation is not triggered after the checkbox change, the react form is not aware of this change.
Thanks in advance for your help.
I've noticed that customized form components are automatically rendered with the has-success attribute. Why is this? Is there a way to fix this?
By default, errors are not shown and when a user submits the form, validation happens. But if you want has-error classes in all fields with invalid data, simply call this.props.form.validateFields() in componentDidMount method which will run validation and will add css classes to fields according to rules.
I am trying to implement the basic angular form validation. I have implemented the same. But I am curious to know, why it does not works if I am not using ng-model.
Link for plunker to show the same behaviour
ngModel directive holds an instance of NgModelController containing the services for data-binding, validation, CSS updates, and value formatting and parsing. If ngModel itself is not there, validation will not work.
For form validation to work you need both form instance which can be published to scope using name attribute and the form input control (ngModel). The below description from Angular documentation explains that:
A form is an instance of FormController. The form instance can
optionally be published into the scope using the name attribute.
Similarly, an input control that has the ngModel directive holds an
instance of NgModelController. Such a control instance can be
published as a property of the form instance using the name attribute
on the input control. The name attribute specifies the name of the
property on the form instance.
This implies that the internal state of both the form and the control
is available for binding in the view using the standard binding
primitives.
This allows us to extend the above example with these features:
Custom error message displayed after the user interacted with a
control (i.e. when $touched is set) Custom error message displayed
upon submitting the form ($submitted is set), even if the user didn't
interact with a control
Because without the ng-model, the input elements aren't bound to anything within your application's scope.
Angular has own context model. (scope or something else) If you treat form outside Angular world, form can't get any information in Angular point of view.
If you doesn't want to use ng-model, use plain javascript validation method.
ng-model="value" defines that the value of that particular element is from angular's context. It checks for the value in the scope where the element is declared. For example, we have onclick="call()" and ng-click="call()" methods. The onclick event search for the function that is outside of angular context, ng-click event search for the function in the scope.
<div ng-app="app" ng-controller="Ctr" onclick="call()" ng-click="call()"></div>
<script>
function call(){
console.log('out of angular');
}
angualr.app('app', function($scope){
$scope.call = function(){console.log('insode angular')}
})
</script>
In the above code if you remove onclick, then ng-click prints 'inside angular', if you remove ng-click, then onclick prints out of angular. If both will be there, both will be called and prints.
In the same way, if you remove ng-model, you will loose the control over the value of input in angular context and $error, $invalid doesn't know what to validate.
I've made a date picker directive that uses a single date picker from the improvely datepicker library. It has two input tags and an OK button.
Date Picker Library
Single Date Picker Example
If I change the value of the input field via the keyboard the models get the desired value and calls to the server take place as expected. The problem arises when I use the date picker. The value of the model does not change. It still has the same value that I set via the keyboard.
But if I run document.getElementById('frompicker').value using the console it shows me the right date that I set using the datepicker.
If I don't set any value form the keyboard and only use the datepicker drop down, the values of the models are undefined.
I've tried a few solutions offered for Angular Boostrap UI Datepicker and Angular UI Datepicker. None of them work.
Edit after a comment
Code can be found here - https://plnkr.co/edit/HzkYzUajGlsZq5KhUwsx
Any help is greatly appreciated :)
You should sync scope after datepicker change via
$scope.$apply();
or
$scope.$evalAsync();
seems it 'apply.daterangepicker' event for your datepicker
I tried all the methods mentioned in different answers. My colleagues told that it's a bad idea to use $scope.$evalAsync() or $scope.$apply() unnecessarily. Our code base does not use digest, compile and the likes. So that was causing a hindrance.
I finally decided to detect the date change event as suggested by Valery Kozlov (the accepted answer) and manually changing the model.
I accessed the date like this.
$('#frompicker').val(); // can be done without jQuery as well
Changed the model using this.
// use Angular's $on to make things consistent if needed
$('#frompicker').on('apply.daterangepicker', function(ev, picker) {
scope.vm.from_date = $('#frompicker').val();
});
Does anyone have a solution to updating angular ui's disabled dates from a server response?
https://github.com/angular-ui/bootstrap/issues/779
You should create another directive that will require datepicker's controller. From your
directive you should call the refreshView of the datepicker to reevalute the disabled dastes.
Does anyone have example code for that?
I'm trying to use angular ui datepicker so that the disabled dates are read from a server response. I change the datepicker's min date to force it to refresh.
I saw another stackoverflow page where the user had it refresh, but it relied on the datepicker calendar being clicked. Another one used set the date min attribute as the value of another field.
For me, I have a completely separate field from the date picker. When changed, it sends an http request to the server, and on a successful response the available dates are updated.
The only problem with changing the min date to force a refresh is that sometime's there same but with different dates to disable. I'm looking into changing a datepicker option I do not use to a random value to force a refresh.
Does anyone have a better way? I saw cross controller communication via a service, but this is a different module. I also saw a github issue where the datepicker controller can be
I've found a simple solution to this problem using a decorator: https://gist.github.com/cgmartin/3daa01f910601ced9cd3
Then, you only need to call $scope.$broadcast('refreshDatepickers') to refresh the datepickers.
IMPORTANT: For more recent ui-bootstrap datepicker library, you may need to replace 'datepickerDirective' with 'uibDatepickerDirective' if you are using datepicker with uib-datepicker element or attribute.
The angular bootstrap datepicker has datepicker-options
This user listed the solution: https://github.com/angular-ui/bootstrap/issues/2189#issuecomment-225685104
bogdandrumen commented on Jun 13
Use datepicker-options="{minDate: yourScopeMinDate}"
which worked for me. I have two pickers, the second picker cannot be greater than the first one so if the first picker changes, the second picker's max date also changes.