json input validation with angularjs

Question

I want to validate JSON input. I know it can be done with a custom directive, but I am not capable of writing it on my own. Now I am trying to do it with ng-change.

my html:

<div class="row">
    <div class="form-group col-xs-12">
         <label>Custom data:</label>
         <textarea class="form-control" rows="10" name="customData" ng-model="application.customDataString" ng-change="validateJSON()"></textarea>
    </div>
 </div>

my script

$scope.validateJSON = function () {
        try {
            JSON.parse($scope.application.customDataString);
        } catch (e) {
            $scope.applicationForm.customData.$setValidity = false;
        }
        return true;
}

but I am getting an error: Cannot read property '$setValidity' of undefined

TypeError: $scope.application.customDataString.$setValidity is not a function — taskiukas
– taskiukas, Commented Sep 20, 2017 at 9:51

Sibiraj · Accepted Answer · 2017-09-20 12:10:46Z

4

Check this

var app = angular.module('myApp', []);
    app.controller('mainCtrl', function($scope) {

      $scope.application = {
        customDataString: ""
      };

      $scope.validateJSON = function() {

        try {
          JSON.parse($scope.application.customDataString);
          $scope.myForm.customData.$valid = true;
          // or
          // myForm.customData.$setValidity('valid', true);
        } catch (e) {
          $scope.myForm.customData.$valid = false;
           // or
           // myForm.customData.$setValidity('valid', false);
        }
        return true;
      }

    })

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <script data-require="[email protected]" data-semver="1.6.5" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="mainCtrl">

  <div class="row" name="myForm" ng-form>
    <div class="form-group col-xs-12">
      <label>Custom data:</label>
      <textarea class="form-control" rows="10" name="customData" ng-form ng-model="application.customDataString" ng-change="validateJSON(myForm)"></textarea>
    </div>
  </div>
  <br>
  IS JSON VALID: {{myForm.customData.$valid}}
</body>

</html>

Check this plunker too. Using ng-form https://plnkr.co/edit/0BFO08fYU0op6z2W9Vh4?p=preview

edited Sep 20, 2017 at 12:10

answered Sep 20, 2017 at 9:42

Sibiraj

4,7868 gold badges37 silver badges59 bronze badges

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

5 Comments

taskiukas Over a year ago

now i get another error: TypeError: Cannot read property '$setValidity' of undefined

taskiukas Over a year ago

Thats working, but i have other fields in my form, and my submit button is activated only when the form is valid. With this solution i can not achieve this goal

Sibiraj Over a year ago

it is possible to n number of fields. if you don't feel comfortable ng-form. then use normal form.

Sibiraj Over a year ago

check this plnkr.co/edit/nyiYFmojgeRy9bhNA7jC?p=preview @taskiukas. and both can solve your problem

taskiukas Over a year ago

Your example works. But now, i have another problem. <p>IS JSON VALID: {{applicationAddForm.customData.$valid}}</p> <p>IS FORM VALID {{applicationAddForm.$valid}}</p> I enter invalid json, and then i get false, true. Invalid json, but the form is valid? I get false, true

Collectives™ on Stack Overflow

json input validation with angularjs

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related