<!--TypeError:``Cannot read property '$setPristine' of undefined
at n.$scope.add(lay.js: 22)
at fn(eval at compile(angular.js: 14432), < anonymous > : 4: 200)
at b(angular.js: 15485)
at e(angular.js: 25018)
at n.$eval(angular.js: 17229)
at n.$apply(angular.js: 17329)
at HTMLButtonElement. < anonymous > (angular.js: 25023)
at Qf(angular.js: 3456)
at HTMLButtonElement.d(angular.js: 3444)(anonymous
function)# angular.js: 13550(anonymous
function)# angular.js: 10225$apply# angular.js: 17334(anonymous
function)# angular.js: 25023Qf# angular.js: 3456d# angular.js: 3444-- >
angular.module('myApp', ['ngMaterial']).controller('myCtrl', function($scope) {
$scope.userlist = [];
$scope.userlist = function(user) {
console.log(user)
if (user && user.firstname) {
$scope.userlist.push({
firstname: user.firstname,
lastname: user.lastname,
DOB: user.dateofbirth,
email: user.mail,
password: user.paswd,
repass: user.paswdtwo
});
$scope.add();
}
};
$scope.add = function() {
$scope.user = {};
$scope.userForm.$setPristine();
$scope.userForm.$setUntouched();
};
});
<!DOCTYPE html>
<html>
<head>
<title>Signup</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<!-- <script type="text/javascript" src= "layout.js"></script> -->
<script type="text/javascript" src="lay.js"></script>
</head>
<body>
<form name="userForm" novalidate role="form" ng-submit="userForm.$valid && userlist(user)">
<div ng-app="myApp" ng-controller="myCtrl">
<div layout="column" layout-align="center center">
<md-card>
<div layout-gt-sm="row">
<md-input-container class="md-block">
<label>First Name</label>
<input name="firstname" ng-model="user.firstname" required>
<div ng-show="userForm.$submitted || form.firstname.$touched">
<div ng-show="userForm.firstname.$error.required">your first Name.</div>
</div>
</md-input-container>
<md-input-container class="md-block">
<label>Last Name</label>
<input name="lastname" ng-model="user.lastname" required>
<div ng-show="userForm.$submitted || form.lastname.$touched">
<div ng-show="userForm.lastname.$error.required">Enter last name</div>
</div>
</md-input-container>
</div>
<md-input-container>
<label>DOB</label>
<md-datepicker ng-model="user.dateofbirth" name="dateofbirth" required></md-datepicker>
<div ng-show="userForm.$submitted || form.dateofbirth.$touched ">
<div ng-show="userForm.dateofbirth.$error.required">Enter DOB</div>
</div>
</md-input-container>
<md-input-container class="md-block">
<label>Email</label>
<input name="mail" type="email" ng-model="user.mail" required>
<div ng-show="userForm.$submitted || form.mail.$touched">
<div ng-show="userForm.mail.$error.required">Enter email ID</div>
</div>
</md-input-container>
<md-input-container class="md-block">
<label>Password</label>
<input name="paswd" type="Password" ng-model="user.paswd" required>
<div ng-show="userForm.$submitted || form.paswd.$touched">
<div ng-show="userForm.paswd.$error.required">Enter your password</div>
</div>
</md-input-container>
<md-input-container class="md-block">
<label>Re-type Password</label>
<input name="paswdtwo" type="Password" ng-model="user.paswdtwo" required>
<div ng-show="userForm.$submitted || form.paswdtwo.$touched">
<div ng-show="userForm.paswdtwo.$error.required"></div>
</div>
</md-input-container>
<md-card-action layout="row" layout-align="center">
<md-button class="md-raised md-primary" ng-click="add()">Signup</md-button>
</md-card-action>
<md-card-content>
<span ng-repeat="x in lag">
<span ng-bind="x.firstname" ></span>
</span>
</md-card-content>
</md-card>
</div>
</div>
</form>
</script>
</body>
</html>
The <form> tag is outside the ng-app/ng-controller attribute lines. Angular won't be able to access $scope.userForm in your $scope.add function.
$scope.add=
function(userForm put form object)
{
$scope.user={};
};
HTML changes:
<md-button class="md-raised md-primary" ng-click="add(userForm)">Signup</md-button>
Angular changes:
$scope.add=function(userForm){
$scope.user={};
userForm.$setPristine();
userForm.$setUntouched();
};
userForm is not in $scope, you need to pass to add function.
:)
Your form tag is outside the controller in HTML
is outside the controller scope so use this
<div ng-app="myApp" ng-controller="myCtrl">
<form name="userForm" novalidate role="form" ng-submit="userForm.$valid && userlist(user)">
<div layout="column" layout-align="center center">
<md-card>
<div layout-gt-sm="row">
<md-input-container class="md-block" >
<label>First Name</label><input name="firstname" ng-model="user.firstname" required>
<div ng-show="userForm.$submitted || form.firstname.$touched">
<div ng-show="userForm.firstname.$error.required">your first Name.</div>
</div>
</md-input-container>
<md-input-container class="md-block" >
<label>Last Name</label><input name="lastname" ng-model="user.lastname" required>
<div ng-show="userForm.$submitted || form.lastname.$touched" >
<div ng-show="userForm.lastname.$error.required">Enter last name</div>
</div>
</md-input-container>
</div>
<md-input-container>
<label>DOB</label>
<md-datepicker ng-model="user.dateofbirth" name="dateofbirth" required></md-datepicker>
<div ng-show="userForm.$submitted || form.dateofbirth.$touched ">
<div ng-show="userForm.dateofbirth.$error.required">Enter DOB</div>
</div>
</md-input-container>
<md-input-container class="md-block" >
<label>Email</label><input name="mail" type="email" ng-model="user.mail" required>
<div ng-show="userForm.$submitted || form.mail.$touched">
<div ng-show="userForm.mail.$error.required">Enter email ID</div>
</div>
</md-input-container>
<md-input-container class="md-block" >
<label>Password</label><input name="paswd" type="Password" ng-model="user.paswd" required>
<div ng-show="userForm.$submitted || form.paswd.$touched">
<div ng-show="userForm.paswd.$error.required">Enter your password</div>
</div>
</md-input-container>
<md-input-container class="md-block">
<label>Re-type Password</label><input name="paswdtwo" type="Password" ng-model="user.paswdtwo" required>
<div ng-show="userForm.$submitted || form.paswdtwo.$touched">
<div ng-show="userForm.paswdtwo.$error.required"></div>
</div>
</md-input-container>
<md-card-action layout="row" layout-align="center">
<md-button class="md-raised md-primary" ng-click="add()">Signup</md-button>
</md-card-action><md-card-content>
<span ng-repeat="x in lag">
<span ng-bind="x.firstname" ></span>
</span>
</md-card-content>
</md-card>
</div>
</form>
</div>
This may solve ur problem
Related
I am trying to integrate payumoney with angularjs. But it shows error like 'checksum failed'.
controller.js
(function ()
{
'use strict';
angular
.module('app.todo')
.controller('TodoController', TodoController);
/** #ngInject */
function TodoController($document, $mdDialog, $mdSidenav, Tasks, Tags,$scope,$crypthmac)
{
var vm = this;
vm.txnid = "fd3e847h2";
vm.firstname = "Hemanth";
vm.email = "kevinguru888#gmail.com";
vm.phone = "9901996148";
vm.service_provider = "payu_paisa";
vm.productinfo = "steering";
vm.amount = "399.00";
vm.surl = "http://localhost:3000/success";
vm.furl = "http://localhost:3000/failure";
vm.key = "OygoFs";
vm.salt = "BV1QBwCv";
var string = vm.key + '|' + vm.txnid + '|' + vm.amount + '|' + vm.productinfo + '|' + vm.firstname + '|' + vm.email + '|||||||||||' + vm.salt;
vm.hash = $crypthmac.encrypt(string,"");
}
})();
html file
<head>
<script type='text/javascript' src="../bower_components/angular-hmac- sha512/angular-hmac-sha512.js"></script>
</head>
<div id="todo" class="page-layout simple tabbed">
<!-- HEADER -->
<div class="header md-accent-bg" layout="row" layout-align="start center">
<div class="title">
<span class="md-display-1 font-weight-300">PAY U Form</span>
</div>
</div>
<!-- / HEADER -->
<md-content layout-padding>
<div class="innerContent">
<form action='https://test.payu.in/_payment', method='post', name="buyDetailsForm">
<md-content class="md-padding">
<div layout="row" layout-align="space-around">
<div flex style="max-width:400px;">
<md-input-container class="md-block">
<label>Transaction Id</label>
<input name="txnid" ng-model="vm.txnid">
</md-input-container>
</div>
<div flex style="max-width:400px;">
<md-input-container class="md-block">
<label>Name</label>
<input name='firstname' ng-model="vm.firstname">
</md-input-container>
</div>
<div flex style="max-width:400px;">
<md-input-container class="md-block" flex-gt-sm>
<label>Email</label>
<input name='email' ng-model="vm.email">
</md-input-container>
</div>
</div>
<div layout="row" layout-align="space-around">
<div flex style="max-width:400px;">
<md-input-container class="md-block">
<label>Mobile</label>
<input name='phone' ng-model="vm.phone">
</md-input-container>
</div>
<div flex style="max-width:400px;">
<md-input-container class="md-block" flex-gt-sm>
<label>Service Provider</label>
<input name='service_provider' ng-model="vm.service_provider">
</md-input-container>
</div>
</div>
<div layout="row" layout-align="space-around">
<div flex style="max-width:400px;">
<md-input-container class="md-block">
<label>Product Info</label>
<input name='productinfo' ng-model="vm.productinfo">
</md-input-container>
</div>
<div flex style="max-width:400px;">
<md-input-container class="md-block" flex-gt-sm>
<label>Amount</label>
<input name='amount' ng-model="vm.amount">
</md-input-container>
</div>
</div>
<div layout="row" layout-align="space-around">
<div flex style="max-width:400px;">
<md-input-container class="md-block">
<label>Success Url</label>
<input name='surl' ng-model="vm.surl">
</md-input-container>
</div>
<div flex style="max-width:400px;">
<md-input-container class="md-block" flex-gt-sm>
<label>Failure Url</label>
<input name='furl' ng-model="vm.furl">
</md-input-container>
</div>
</div>
<div layout="row" layout-align="space-around">
<div flex style="max-width:400px;">
<md-input-container class="md-block">
<label>Key</label>
<input name='key' ng-model="vm.key">
</md-input-container>
</div>
<div flex style="max-width:400px;">
<md-input-container class="md-block" flex-gt-sm>
<label>Hash</label>
<input name='hash' ng-model="vm.hash">
</md-input-container>
</div>
</div>
</md-content>
<div layout="row" layout-align="end center">
<md-button class="md-raised md-primary" ng-click="vm.cancel()">Cancel</md-button>
<md-button class="md-raised md-primary" ng-click="vm.submit(buyDetailsForm)">Place Order</md-button>
</div>
</form>
</div>
</md-content>
</div>
The error shows like "SORRY! We were unable to process your payment Checksum Failed".
This error occurrs when hash and passing value in form doesn't match.
If you are passing 2 udf then you must also send it in form with name.
And if you are passing the same but still got the same error, then it is because of the problem in generation in hash. You are using $crypthmac but it doesn't create perfect hash, to create either use or own sha512 algorithm, or use an API, to create the perfect hash. You can check that hash created by $crypthmac is not that perfect that PayUMoney decrypt it perfectly, that's why it returns error. Just check has generated with $crypthmac and <?php echo hash('sha512', 'text') ?> you can get the difference.
I have a big problem in my form when I try to reset it everything is reset except the ng messages. I tried everything but nothing worked. I don't know why
Here is my form:
<md-content layout-padding>
<form name="projectForm">
<div layout="row">
<md-input-container flex="50">
<label>Name</label>
<input required name="clientName" ng-model="project.clientName" ng-focus="">
</md-input-container>
<md-input-container flex="50">
<label>Email</label>
<input required type="email" name="clientEmail" ng-model="newEmployee.email"
minlength="10" maxlength="100" ng-pattern="/^.+#.+\..+$/" />
<div ng-messages="projectForm.clientEmail.$error" role="alert" ng-show="message">
<div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']">
Your email must be between 10 and 100 characters long and look like an e-mail address.
</div>
</div>
</md-input-container>
</div>
<div layout="row">
<md-input-container flex="50">
<label>Mobile</label>
<input required name="clientName" ng-model="newEmployee.mobile">
<div ng-messages="projectForm.clientName.$error" ng-show="message">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
<md-input-container flex="50">
<label>Address</label>
<input required name="clientName" ng-model="newEmployee.address">
<div ng-messages="projectForm.clientName.$error" ng-show="message">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
</div>
<md-input-container class="md-block">
<label>Description</label>
<input md-maxlength="30" required md-no-asterisk name="description" ng-model="newEmployee.description">
<div ng-messages="projectForm.description.$error">
<div ng-message="required">This is required.</div>
<div ng-message="md-maxlength">The description must be less than 30 characters long.</div>
</div>
</md-input-container>
<div>
<md-button type="submit" class="md-raised md-primary">Submit</md-button>
<md-button ng-click="cancel()">Cancel</md-button>
</div>
</form>
</md-content>
and here is my reset function in the controller
$scope.reset = function() {
$scope.projectForm.$setPristine();
$scope.projectForm.$setValidity();
$scope.projectForm.$setUntouched();
}
I need one example for validations on dynamic added fields. Here is my page.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js">
</script>
<title>Add Remove in AngularJS</title>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.deleted = [];
$scope.inputs = [];
$scope.addRow = function(){
$scope.inputs.push({name:'', age:''});
};
$scope.removeRow = function(index, input){
// alert(index);
// alert(input);
$scope.deleted.push(input);
$scope.inputs.splice(index,1);
};
});
</script>
</head>
<body style="background-color: gray; margin-top: 10px; ">
<center>
<div class="row" ng-app="myApp" ng-controller="myCtrl">
<div class="col-md-6">
<div class="panel panel-flat">
<div class="panel-header">
<h4>
Person Address
<button ng-click="addRow()">Add</button>
</h4>
</div>
<div class="panel-body">
<form name="form" class="form-horizontal">
<div ng-repeat="input in inputs">
<div class="form-group" ng-class="{'has-error' : form.name.$invalid}">
<label class="col-md-2 control-label">Name</label>
<div class="col-md-10">
<input type="text" ng-model="input.name" name="name[$index]" ng-maxlength="45" ng-minlength="3"
class="form-control" ng-pattern="/^[a-zA-Z]+$/" required />
<span class="help-block" ng-show="form.name[$index].$error.pattern">Alphabet only</span>
<span class="help-block" ng-show="form.name[$index].$error.minlength">Too Short</span>
<span class="help-block" ng-show="form.name[$index].$error.maxlength">Too Long</span>
<span class="help-block" ng-show="form.name[$index].$error.required">required</span>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Age</label>
<div class="col-md-10">
<input type="text" ng-model="input.age" name="age"
class="form-control" ng-pattern="/^[0-9]{0,3}$/" /><br>
<span ng-show="form.age.$invalid && form.age.$error.pattern">Number
length should be 3</span>
</div>
</div>
<button ng-click="removeRow($index, input)">Remove</button>
<hr>
</div>
</form>
</div>
</div>
</div>
<!-- inputs :{{inputs}}<br>deleted : {{deleted}} -->
</div>
</center>
</body>
</html>
You can add a fonction to you controller :
app.controller('myCtrl', function($scope) {
//...
$scope.validationFn = function () {
//do you validation here
};
then you just need to modify
<form name="form" class="form-horizontal" ng-submit="validationFn()">
Here is the answer:
<div class="panel-body"><form name="form" class="form-horizontal">
<div ng-repeat="input in inputs"><ng-form name="sfIn"><div class="form-group" >
<label class="col-md-2 control-label">Name</label>
<div class="col-md-10">
<input type="text" ng-model="input.name" name="name" ng-maxlength="45" ng-minlength="3"
class="form-control" ng-pattern="/^[a-zA-Z]+$/" required />
<span
class="help-block" ng-show="sfIn.name.$error.pattern">Alphabet only</span>
<span
class="help-block" ng-show="sfIn.name.$error.minlength">Too Short</span>
<span
class="help-block" ng-show="sfIn.name.$error.maxlength">Too Long</span>
<span
class="help-block" ng-show="sfIn.name.$touched.required || sfIn.name.$error.required ||
sfIn.name.$dirty.required">required</span>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Age</label>
<div class="col-md-10">
<input type="text" ng-model="input.age" name="age"
class="form-control" ng-pattern="/^[0-9]{0,3}$/" /><br>
<span
ng-show="sfIn.age.$error.pattern">Number
length should be 3</span>
</div>
</div>
<button
ng-click="removeRow($index, input)">Remove</button>
</ng-form>
<hr>
</div>
</form>
</div>
I'm using the library angular-material for my personal project.
I'm trying to use the an input form like the one in the demo.
I think I've included all the library needed here:
...
<link rel="stylesheet" href="bower_components/angular-material/angular-material.min.css" type="text/css"/>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-aria/angular-aria.js"></script>
<script src="bower_components/angular-messages/angular-messages.js"></script>
<script src="bower_components/angular-material/angular-material.min.js"></script>
...
</head>
<body>
<div ng-app="MyApp" ng-cloak>
<div ui-view></div>
</div>
</body>
And this is my login page
<div class="container page page-login">
<md-content class="form-login">
<md-toolbar>
<div class="md-toolbar-tools">
<h2>
<span>Login</span>
</h2>
</div>
</md-toolbar>
<br>
<div layout="column">
<form ng-submit="logIn()" class="md-inline-form">
<div flex>
<md-input-container class="md-block">
<label>Username or email</label>
<input ng-model="user.username">
</md-input-container>
</div>
<div flex>
<md-input-container class="md-block">
<label>Password</label>
<input ng-model="user.password" type="password">
</md-input-container>
</div>
<div flex layout="row">
<md-checkbox class="remember-me md-primary" name="remember" aria-label="Remember me">
Remember me
</md-checkbox>
<span flex></span>
<md-button type="submit" class="md-raised md-primary">Login</md-button>
<md-button ng-href="/login/google" class="md-raised md-warn fixed-btn-link">Google+</md-button>
</div>
</form>
</div>
</md-content>
<md-content class="form-signup">
<md-toolbar>
<div class="md-toolbar-tools">
<h2>
<span>Do not have an account yet? Signup now!</span>
</h2>
</div>
</md-toolbar>
<br>
<div layout="column">
<form ng-submit="signup()" class="md-inline-form">
<div flex>
<md-input-container class="md-block">
<label>Email*</label>
<input ng-model="new_user.username" required type="text">
</md-input-container>
</div>
<div flex>
<md-input-container class="md-block">
<label>Firstname</label>
<input ng-model="new_user.firstname" type="text">
</md-input-container>
</div>
<div flex>
<md-input-container class="md-block">
<label>Lastname</label>
<input ng-model="new_user.lastname" type="text">
</md-input-container>
</div>
<div flex>
<md-input-container class="md-block">
<label>Password*</label>
<input ng-model="new_user.password" ng-change="show_repeat_password_error = checkRepeatEmail()" required type="password">
</md-input-container>
</div>
<div flex>
<md-input-container class="md-block">
<label>Repeat password*</label>
<input ng-model="new_user.repeat_password" ng-change="show_repeat_password_error = checkRepeatEmail()" required type="password">
<md-caption ng-show="show_repeat_password_error">Passwords must match!</md-caption>
</md-input-container>
</div>
<div flex layout="row" layout-align="center" >
<md-button type="submit" class="md-raised md-primary">Signup</md-button>
</div>
</form>
</div>
</md-content>
</div>
When I visit the page for the first time this is the result where seems
that angular-material works well with button, checkbox and the rest
but it doesn't with the inputs:
However when i reload the page it works properly:
I have this problem also in other pages. What's wrong?
Thanks for your answers.
i am unable to clear my form in some of the fields which have more than one validation.can anyone please help?
<div class="col-lg-4 col-md-6">
<div class="form-group" data-ng-class="{ 'has-error' : vm.form.phonenumber.$invalid && (vm.form.phonenumber.$dirty || vm.form.phonenumber.$touched)}">
<label class="control-label col-md-4 col-sm-3 col-xs-12" data-i18n=" _phoneNumber_"></label>
<div class="col-md-8 col-sm-8 col-xs-10">
<input type="text" class="form-control col-md-7 col-xs-12" data-ng-model="vm.person.phoneNumber" required name="phonenumber" ng-pattern="/^[0-9]{10}$/" />
<span data-ng-show="vm.form.phonenumber.$error.required && (vm.form.phonenumber.$dirty || vm.form.phonenumber.$touched)" class="help-block" data-i18n="_phoneNumrequired_"></span>
<span class="help-block" data-ng-show="vm.form.phonenumber.$error.pattern && vm.form.phonenumber.$dirty" data-i18n="_phoneNuminvalid_"></span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="form-group" data-ng-class="{ 'has-error' : vm.form.mobilenumber.$invalid && (vm.form.mobilenumber.$dirty || vm.form.mobilenumber.$touched)}">
<label class="control-label col-md-4 col-sm-3 col-xs-12" data-i18n=" _mobileNumber_"></label>
<div class="col-md-8 col-sm-8 col-xs-10">
<input type="text" class="form-control col-md-7 col-xs-12" data-ng-model="vm.person.mobileNumber" required name="mobilenumber" ng-pattern="/^[0-9]{10}$/" />
<span data-ng-show="vm.form.mobilenumber.$error.required && (vm.form.mobilenumber.$dirty || vm.form.mobilenumber.$touched)" class="help-block" data-i18n="_mobileNumrequired_"></span>
<span class="help-block" data-ng-show="vm.form.mobilenumber.$error.pattern && vm.form.mobilenumber.$dirty" data-i18n="_mobileNuminvalid_"></span>
</div>
</div>
</div>`
angular function:
function cancel() { vm.person = angular.copy(vm.original); vm.form.$setPristine(); vm.form.$setUntouched(); }
this is before pressing cancel
this is after cancelling
you can see that data in email, phone and mobiles are not cleared
Hi See this working code where i am clearing the data of form.
migth be this will help
code is
//module declaration
var app = angular.module('myApp', []);
//Controller declaration
app.controller('myCtrl', function($scope) {
$scope.person = {
firstName: "John",
lastName: "Doe"
};
var oriPerson = angular.copy($scope.person);
$scope.resetForm = function() {
$scope.person = angular.copy(oriPerson);
$scope.personForm.$setPristine();
};
$scope.clearForm = function() {
$scope.person = {};
}
$scope.isPersonChanged = function() {
return !angular.equals($scope.person, oriPerson);
};
});
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<form name="personForm" novalidate>
<label for="firstNameEdit">First name:</label>
<input id="firstNameEdit" type="text" name="firstName" ng-model="person.firstName" required />
<br />
<label for="lastNameEdit">Last name:</label>
<input id="lastNameEdit" type="text" name="lastName" ng-model="person.lastName" required />
<br />
<br />
<button type="button" ng-click="resetForm()" ng-disabled="!isPersonChanged()">Reset</button>
<button type="button" ng-click="clearForm()">clear</button>
</form>
</body>
<html>