angular raw json

by Bretto

HTML

<div ng-controller="AppCntrl">
    <form name='formA'>
        <input type="text" name='inputA' ng-model='modelA' cst-input required />
         <pre>inputA: {{toJSON(formA.inputA)}}</pre>

        <input type="text" name='inputB' ng-model='modelB' required/>
         <pre>inputB: {{toJSON(formA.inputB)}}</pre>

       <pre>formA: {{toJSON(formA)}}</pre>

    </form>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>

SCSS

pre{font-size:12px;display:block}
form{padding:15px;}
form[name=formA].ng-pristine{background-color:#fff;}
form[name=formA].ng-dirty{background-color:yellow;}
form[name=formA].ng-valid{background-color:green}
form[name=formA].ng-dirty.ng-invalid{background-color:red;}

JavaScript

var app = angular.module("app", []);

app.controller("AppCntrl", function ($scope) {
        
    $scope.$watch("formA", function(formObject){
      console.log(formObject);
    });
    
    
    $scope.toJSON = function (obj) {
        return JSON.stringify(obj, null, "    ");
    }

});


app.directive("cstInput", function(){});

angular.bootstrap(document, ['app']);