Chapter 5: Working with AngularJS forms

by billy roberts

HTML

<script src="https://code.angularjs.org/1.3.2/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="Ctrl">
        <form novalidate name="myForm">
            <input name="input1" ng-model="formdata.myInputFirst" />
            <input name="input2" ng-model="formdata.mySecondInput" />
        </form>
        <div>
            Form pristine state: 
            {{ myForm.$pristine }},
            {{ myForm.input1.$pristine && myForm.input2.$pristine }},
            {{ !(myForm.input1.$dirty || myForm.input2.$dirty) }}
        </div>
        <div>
            Form dirty state: 
            {{ myForm.$dirty }},
            {{ myForm.input1.$dirty || myForm.input2.$dirty }},
            {{ !(myForm.input1.$pristine && myForm.input2.$pristine) }}
        </div>
        <div>
            First field pristine/dirty state: 
            {{ myForm.input1.$pristine }}/{{ myForm.input1.$dirty }}
        </div>
        <div>
            Second field pristine/dirty state: 
            {{ myForm.input2.$pristine }}/{{ myForm.input2.$dirty }}
        </div>
    </div>
</div>

JavaScript

// how to check pristine/dirty state
// of ctrls and overall form

angular.module('myApp', [])
.controller('Ctrl', function() {});