Level Extreme platform
Subscription
Corporate profile
Products & Services
Support
Legal
Français
Validations of the input
Message
From
07/09/2017 12:57:32
 
General information
Forum:
AngularJS
Category:
Coding, syntax & commands
Miscellaneous
Thread ID:
01653867
Message ID:
01654093
Views:
51
This message has been marked as a message which has helped to the initial question of the thread.
>Hi Viv,
>
>Do you know if the asyncValidators are always firing (regardless if the value is touched or not)?
>
>I'm debugging my code and it is firing when I just instantiate the form.
>
>Here is the directive now:
>
>
>(function (angular) {
>    "use strict";
>
>    var services,
>        $log;
>
>    angular.module("sysMgrApp").directive("smCodeUniqueValidator", ["ServiceLoader", smCodeUniqueValidator]);
>
>    /**
>     * smCodeUniqueValidator Directive
>     * @param {} serviceLoader 
>     * @returns {Object} 
>     */
>    function smCodeUniqueValidator(serviceLoader) {
>        services = serviceLoader;
>        $log = services.Log.getInstance("smCodeUniqueValidator");
>       
>        return {
>
>            require: "ngModel",
>
>            scope: {
>                primaryKey: "=?",
>                tableName: "@",
>                columnToTest: "@",
>                errorMessage: "=?"
>            },
>
>            link: function ($scope, element, attrs, ngModel) {
>
>                ngModel.$asyncValidators.smCodeUnique = function (modelValue, viewValue) {
>                    if (!viewValue) {
>                        return true;
>                    }
>
>                    let codeObject = {
>                        id: $scope.primaryKey, tableName: $scope.tableName,
>                        columnToTest: $scope.columnToTest, code: viewValue
>                    };
>                    return services.Http.put('api/items/checkCodeUniqueness', codeObject).then(
>                        function (response) {
>                            if (!response.data.isValid) {
>                                $scope.errorMessage = response.data.errorMessage;
>                                return services.Deferred.reject(response.data.errorMessage);
>                            }
>                            return true;
>                        }
>                    );
>                };
>            }
>        };
>    }
>})(angular);
>
>and this is the HTML - should I try adding ngModel.$touched condition at the very top?
>
>
><div class="col-xs-6">
>            <div class="controls">
>                <label class="control-label"
>                       ng-hide="editRetailTrackingForm.barcode.$dirty && editRetailTrackingForm.barcode.$error">
>                    @Labels.barcode:
>                </label>
>                <div ng-if="editRetailTrackingForm.barcode.$dirty">
>                    <div ng-messages="editRetailTrackingForm.barcode.$error">
>                        <div ng-message="maxlength">
>                            <label class="field-validation-error control-label-error animate-show">
>                                @String.Format(Messages.cannotExceed, Labels.barcode, "100")
>                            </label>
>                        </div>
>                        <div ng-message="smCodeUnique">
>                            <label class="field-validation-error control-label-error animate-show">
>                                {{itemBarcodeErrorMessage}}
>                            </label>
>                        </div>
>                    </div>
>                </div>
>                <div ng-class="{loading:editRetailTrackingForm.barcode.$pending}">@String.Format(Messages.validatingX, Labels.barcode)</div>
>                <input type="text" name="barcode"
>                       ng-model="currentItem.barcode"
>                       sm-code-unique-validator
>                       table-name="items"
>                       column-to-test="barcode"
>                       error-message="itemBarcodeErrorMessage"
>                       primary-key="currentItem.itemId"
>                       ng-model-options="{ debounce: { default : 500, blur: 0 }}"
>                       class="form-control"
>                       ng-maxlength="100" />
>
>            </div>
>        </div>
Looks like this might be known behaviour. See: https://stackoverflow.com/questions/31736496/why-does-adding-additional-angularjs-validation-directives-cause-asyncvalidator
and https://github.com/angular/angular.js/issues/14691

As suggested earlier there may be some condition that you can check in your directive to determine whether the asyncValidator actually needs to run. If it does not then you could just short-circuit the http call
Previous
Next
Reply
Map
View

Click here to load this message in the networking platform