Angular JS Validate Input On Change

Question

I have an input box where you have to insert a Spanish ID, Passport or another type of ID which is validated on the click of a button.

What I need to do is validate this input with the same rules without submitting (on change). Do I use ngChange for this or ajax?

HTML:

<input id="identification" name="identification" type="text" ng-click="trackingLoginCtrl.showErrorCatpcha=false" class="form-control input-md" ng-model="trackingLoginCtrl.owcsDocument" required="">

<button id="submit" name="submit" ng-click="trackingLoginCtrl.validateF()"></button>

Controller Function:

validateF() {
            let vm = this;
            vm.showError = false;
            vm.showErrorCatpcha = false;
            if (vm.owcsDocument != null) {

                //Reglas de validacion
                let validChars = 'TRWAGMYFPDXBNJZSQVHLCKET';
                let nifRexp = /^[0-9]{8}[TRWAGMYFPDXBNJZSQVHLCKET]{1}$/i;
                let nieRexp = /^[XYZ]{1}[0-9]{7}[TRWAGMYFPDXBNJZSQVHLCKET]{1}$/i;
                let passRexp = /^[a-z]{3}[0-9]{6}[a-z]?$/i;
                let str = vm.owcsDocument.toString().toUpperCase();

                //Si no cumple ninguna de las estruturas error
                if (!nifRexp.test(str) && !nieRexp.test(str) && !passRexp.test(str)) {
                    vm.showError = true;
                    return false;
                }

                //Si es pasaporte pasamos la información directamente
                if (passRexp.test(str)) {
                    vm.aux(str);
                    return true;
                } else {
                    //Si es DNI/NIE validamos que la/s letra/s sean validas con la numeracion.
                    let nie = str
                        .replace(/^[X]/, '0')
                        .replace(/^[Y]/, '1')
                        .replace(/^[Z]/, '2');

                    let letter = str.substr(-1);
                    let charIndex = parseInt(nie.substr(0, 8)) % 23;

                    if (validChars.charAt(charIndex) === letter) {
                        vm.aux(str);
                        return true;
                    }
                    vm.showError = true;
                    return false;
                }
            } else {
                vm.showError = true;
                return false;
            }
        }

Gabriel_bdcp · Accepted Answer · 2019-03-21 10:53:45Z

1

ng-change allows you to evaluate the expression that you insert in your controller when the input is changed.

The difference with ng-blur is that blur calls the function when the input loses the focus.

It's up to you when you want to trigger the function in your controller (when change the value or when lose the focus of the input).

The only thing that you need is to create a function in your controller that is called when the input is changed. Like this:

<input type="text" ng-model="passport" ng-change="evalatePassport()" id="passport />

and in your controller implement the logic of the function "evaluatePassport"

answered Mar 21, 2019 at 10:53

Gabriel_bdcp

261 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular JS Validate Input On Change

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related