$(function() {
console.log('ready!');
});
angular.module('ngFormReset', [])
.controller('FormResetController', function($scope) {
'use strict';
$scope.submitForm = function() {
if ($scope.myForm.$valid) {
$('#reset-btn').show()
$('#show').show()
}
}
$scope.reset = function() {
$scope.formData = {};
$scope.myForm.$setPristine();
$('#show').hide()
$('#reset-btn').hide()
}
});
<!DOCTYPE html>
<html lang="en" ng-app="ngFormReset" ng-controller="FormResetController">
<head>
<title>Angular Form Reset</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://netdna.bootstrapcdn.com/bootswatch/3.1.1/yeti/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="style.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div id="inputs">
<form name="myForm" ng-submit="submitForm()" id="myForm" novalidate>
<h2>All fields are required!</h2>
<div class="form-group" ng-class="{'has-error' : myForm.name.$invalid && !myForm.name.$pristine}">
<input type="text" name="name" class="form-control" ng-model="formData.name" placeholder="Name" required>
</div>
<div class="form-group" ng-class="{'has-error' : myForm.jobTitle.$invalid && !myForm.jobTitle.$pristine}">
<input type="text" name="jobTitle" class="form-control" placeholder="Job Title" ng-model="formData.jobTitle" required>
</div>
<div class="form-group" ng-class="{'has-error' : myForm.tediusTask.$invalid && !myForm.tediusTask.$pristine}">
<input type="email" class="form-control" name="email" placeholder="Email" ng-model="formData.email" required>
</div>
<button type="submit" class="btn btn-primary" ng-disabled="myForm.$invalid">Submit</button>
<button type="reset" class="btn btn-success" id="reset-btn" ng-click="reset()">Reset?</button>
</form>
</div>
<hr>
<h4 id="show">
<p class="input">Name: <span class="value">{{ formData.name }}</span></p>
<p class="input">Job Title: <span class="value">{{ formData.jobTitle }}</span></p>
<p class="input">Email: <span class="value">{{ formData.email }}</span></p>
</h4>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js" type="text/javascript"></script>
<script src="app.js"></script>
</body>
</html>
body {
background-color: #B7BBBF;
}
.container {
margin-top: 50px;
border: 1px solid gray;
padding-bottom: 20px;
background-color: white;
}
.input {
font-weight: bold;
}
.value {
font-style: italic;
}
#reset-btn, #show {
display: none;
}