Monitoring the validity or errors in AngularJS input fields

Question

Monitoring the validity or errors in AngularJS input fields

I'm attempting to observe the $error or $valid status of a control. Here is the control in question:

<form id="myForm" name="myForm"> 
  <input name="myInput" ng-model="myInputMdl" business-validation/>
</form>

The business-validation directive customizes the validity of the control. I have tried various methods (using either $valid or $error) based on suggestions from this source:

This method does not work as there is no $valid property on myForm.myInput.

$scope.$watch('myForm.myInput.$valid', function(isValid) {
  $scope.usefulVariable = step3.CreditCardNumber.$valid;
}, true);

This approach fails because validity.valid cannot be watched.

$scope.$watch('myForm.myInput.validity.valid', function(isValid) {
  $scope.usefulVariable = step3.CreditCardNumber.$valid;
}, true);

This strategy doesn't work as $scope.myInputMdl is not being monitored for changes.

$scope.$watch('$scope.myInputMdl', function(isValid) {
  $scope.usefulVariable = step3.CreditCardNumber.$valid;
}, true);

Is it possible to watch the validity from a controller?

EDIT

I am not seeking to modify the business-validation directive. My goal is to monitor $valid or $error from the form's controller.

EDIT 2

The code for the controller is as follows:

app.controller('WizardBusinessActionCtrl',
   function($scope, $http, $parse, $filter, wizardBusinessActionService, $timeout) {
     //controller code
   }
);

javascript angularjs validation angularjs-scope

Answer 1

Answer №1

There is no reason why the initial variant should not be effective.

HTML:

<div ng-app="myApp">
    <div data-ng-controller="MainController">
        <form name="myForm"> 
            <input name="myInput" ng-model="myInputMdl" business-validation />
        </form>
    </div>
</div>

Controller and directive:

var myApp = angular.module('myApp', []);

myApp.controller('MainController', function ($scope) {
    $scope.$watch('myForm.myInput.$valid', function (validity) {
        console.log('valid', validity);
    });
});

myApp.directive('businessValidation', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, elem, attr, ctrl) {
            function validate (input) {
                return input === 'hello';
            }

            ctrl.$parsers.unshift(function (value) {
                var valid = validate(value);
                ctrl.$setValidity('businessValidation', valid);
                return valid ? value : undefined;
            });

            ctrl.$formatters.unshift(function (value) {
                ctrl.$setValidity('businessValidation', validate(value));
                return value;
            });
        }
    };
});

$valid property value will change when myInput validity changes, and $watch callback will be triggered.

View example: http://jsfiddle.net/Lzgts/287/

Answer 2

There is no reason why the initial variant should not be effective.

HTML:

<div ng-app="myApp">
    <div data-ng-controller="MainController">
        <form name="myForm"> 
            <input name="myInput" ng-model="myInputMdl" business-validation />
        </form>
    </div>
</div>

Controller and directive:

var myApp = angular.module('myApp', []);

myApp.controller('MainController', function ($scope) {
    $scope.$watch('myForm.myInput.$valid', function (validity) {
        console.log('valid', validity);
    });
});

myApp.directive('businessValidation', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, elem, attr, ctrl) {
            function validate (input) {
                return input === 'hello';
            }

            ctrl.$parsers.unshift(function (value) {
                var valid = validate(value);
                ctrl.$setValidity('businessValidation', valid);
                return valid ? value : undefined;
            });

            ctrl.$formatters.unshift(function (value) {
                ctrl.$setValidity('businessValidation', validate(value));
                return value;
            });
        }
    };
});

$valid property value will change when myInput validity changes, and $watch callback will be triggered.

View example: http://jsfiddle.net/Lzgts/287/

Answer 3

Answer №2

Give this code a try: View Plunker

Here's the HTML snippet:

<div ng-controller="ExampleController">
  <form name="userForm" novalidate >
    Name:
    <input type="text" name="userName" ng-model="firstName" required />
  </form>
  <div>{{firstName}}</div>
  <input type='button' value='Submit' ng-click='validateInput()'/>
</div>

And here is the JavaScript part:

angular.module('getterSetterExample', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.validateInput = function(){
      $scope.$watch($scope.userForm.userName.$valid, function() {
       if($scope.userForm.userName.$valid){
         alert('Value is True');
       }
       else{
         alert('Value is False');
       }
      });

    }

  }]);

Answer 4

Give this code a try: View Plunker

Here's the HTML snippet:

<div ng-controller="ExampleController">
  <form name="userForm" novalidate >
    Name:
    <input type="text" name="userName" ng-model="firstName" required />
  </form>
  <div>{{firstName}}</div>
  <input type='button' value='Submit' ng-click='validateInput()'/>
</div>

And here is the JavaScript part:

angular.module('getterSetterExample', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.validateInput = function(){
      $scope.$watch($scope.userForm.userName.$valid, function() {
       if($scope.userForm.userName.$valid){
         alert('Value is True');
       }
       else{
         alert('Value is False');
       }
      });

    }

  }]);

Monitoring the validity or errors in AngularJS input fields

Answer №1

Answer №2

Similar questions

Tips for preventing a span from disappearing when a hidden div is displayed during onmouseover

Employing buttons and state to eliminate an item from a roster

how to dynamically update a button's text using Vue.js

Instantly see changes without having to manually refresh the screen

Invalid PDF File - Unable to Complete Download via $http

What causes Spyscroll to be impacted by Collapse in Bootstrap 5?

Generating a live HTML preview using Kendo Editor within an Angular framework

Modify the numerical presentation within the provided input text

Deactivate the AJAX button after the specified number of clicks

Leveraging the boolean values of attributes within JSX statements

Unpacking a props object results in an undefined value

Having trouble with playing the appended HTML5 Video?

What is the best way to update the content of a div on an HTML page by incorporating the content of a div from a different page using JavaScript?

Utilize string paths for images instead of requires when resolving img src and background-image URLs

Ways to store a component in cache once its route is triggered

Ways to send data to a popup in svelte

Instead of using a checkmark, consider using step numbers with Mui Stepper's Completed StepIcon

ReactJS with conditional closing tags

if else statement fails to work in ajax-based login form

Exploring how to compare time in hh:mm format using JavaScript