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" required />
            <input name="input2" ng-model="formdata.mySecondInput" required />
        </form>
        <div>
            Form valid state: 
            {{ myForm.$valid }},
            {{ myForm.input1.$pristine && myForm.input2.$valid }},
            {{ !(myForm.input1.$invalid || myForm.input2.$invalid) }}
        </div>
        <div>
            Form invalid state: 
            {{ myForm.$invalid }},
            {{ myForm.input1.$invalid || myForm.input2.$invalid }},
            {{ !(myForm.input1.$valid && myForm.input2.$valid) }}
        </div>
        <div>
            First field valid/invalid state: 
            {{ myForm.input1.$valid }}/{{ myForm.input1.$invalid }}
        </div>
        <div>
            Second field valid/invalid state: 
            {{ myForm.input2.$valid }}/{{ myForm.input2.$invalid }}
        </div>
    </div>
</div>

JavaScript

// demo $valid/$invalid/$pristine state of 
// a ctrl and required

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