angular-dirtyform-check/ngRoute-demo/form2.tpl.html

Dirty (i.e. unsaved changes) form checker for AngularJS

<div class="panel panel-info">
    <div class="panel-heading"><h3 class="panel-title">Info</h3></div>
    <div class="panel-body">Dirty checking active on both forms. Custom dialog will appear if navigating away with unsaved changes.</div>
</div>
<form dirty-check class="well" ng-submit="fakeSubmit()" name="form">
    <div class="form-group">
        <label for="firstname">First name</label>
        <input type="text" class="form-control" id="firstname" placeholder="First name" ng-model="model.firstname">
    </div>
    <div class="form-group">
        <label for="lastname">Last name</label>
        <input type="text" class="form-control" id="lastname" placeholder="Last name" ng-model="model.lastname">
    </div>
    <div class="form-group">
        <label for="nick">Nick</label>
        <input type="text" class="form-control" id="nick" placeholder="Nick" ng-model="model.nick">
    </div>
    <div class="form-group">
        <label for="gender">Gender</label>
        <select class="form-control" id="gender" ng-model="model.gender">
            <option value=""> -- select an option -- </option>
            <option>Female</option>
            <option>Male</option>
        </select>
    </div>
    <a class="btn btn-default" href="#form1" ng-disabled="submit">Go to Form 1 w/o params</a>
    <button class="btn btn-primary" type="submit" ng-disabled="submit || !form.$dirty">Fake submit</button>
    <span class="glyphicon glyphicon-refresh spin" ng-if="submit"></span>
</form>
<hr>
<form dirty-check class="well">
    <div class="form-group">
        <label for="magicnumber">Magic number</label>
        <input type="number" class="form-control" id="magicnumber" placeholder="Magic number" ng-model="model.magicnumber">
    </div>
    <a class="btn btn-default" href="#form1/testParam">Go to form 1 with params</a>
</form>
<hr>
<div class="well">
    <button class="btn btn-primary" type="button" ng-click="gotoForm1()">Show dialog w/o form</button>
</div>