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

[marcelinojorgeromero]

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-]

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

[PowerKiKi]

would any of you submit a PR ?

[r0b-]

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?