Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

After second trigger of the validation the model binding value is undefined #20

Open
marcelinojorgeromero opened this issue Jan 19, 2016 · 3 comments

Comments

@marcelinojorgeromero
Copy link

@marcelinojorgeromero marcelinojorgeromero commented Jan 19, 2016

I'm using a directive for an input text control where i have the following two methods inside controller function.
The first time i paste some text in the text box both methods are triggered. When i type in or delete a character from the text box first is called the validation method and then the ng-change associated method (tiggeredOnTextInputChange) but the value passed (val) is undefined (ng-model="theBindingModelValue"). How can i deal with this?

        $scope.tiggeredOnTextInputChange = function (val) {
            var processedVal = val.length - 1; //"val" will be undefined the second time ngChange is triggered so this line will throw error
            $scope.theBindingModelValue = processedVal;
        };
        $scope.validateUserInput = function(value){
            var isValid = someFactoryWithoutAsyncCalls.validate(value);
            return isValid;
        }

Html of the directive (testInput.html)

<div class="form-group" data-ng-form name="myForm">
  <input type="text" name="{{inputName}}" placeholder={{inputPlaceholder}} class="form-control" data-ng-model="theBindingModelValue" data-ng-change="tiggeredOnTextInputChange(theBindingModelValue)" ui-validate="{isInputValid:'validateUserInput($value)'}"/>
  <span data-ng-show="myForm['\{\{inputName\}\}'].$error.isInputValid">Invalid input</span>
</div>

The complete directive:

function testInput() {

    function testInputCtrl($scope, someFactoryWithoutAsyncCalls) {
        $scope.tiggeredOnTextInputChange = function (val) {
            var processedVal = val.length - 1; //"val" will be undefined the second time ngChange is triggered so this line will throw error
            $scope.theBindingModelValue = processedVal;
        };
        $scope.validateUserInput = function(value){
            var isValid = someFactoryWithoutAsyncCalls.validate(value);
            return isValid;
        }
    }

    testInputCtrl.$inject = ["$scope", "someFactoryWithoutAsyncCalls"];

    return {
        scope: {
            inputName: "@",
            inputPlaceholder: "@"
        },
        restrict: "EA",
        require: "ngModel",
        replace: true,
        templateUrl: "testInput.html",
        controller: testInputCtrl
    };
}

I call it this way:

<test-input input-name="testinput" input-placeholder="TEST"></test-input>
@r0b-
Copy link
Contributor

@r0b- r0b- commented Jan 24, 2016

Having the same issue with an array ... Somehow the validation sets it to undefined on second change and then things get messed up:-(

@PowerKiKi
Copy link
Contributor

@PowerKiKi PowerKiKi commented Jan 25, 2016

would any of you submit a PR ?

@r0b-
Copy link
Contributor

@r0b- r0b- commented Jan 25, 2016

Well seems like this is a feature... and not related to ui-validate.
See the allowInvalid option in https://docs.angularjs.org/api/ng/directive/ngModelOptions
My issue got resolved after setting allowInvalid to true.

Don't know if it makes sense to set this option by ui-validate automatically?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants
You can’t perform that action at this time.