Reset Form adalah mengembalikan suatu data ke data awal atau semula. Dan pada artikel tentang Cara Membuat Reset Form Menggunakan AngularJs saya akan membuat suatu form input dengan tombol reset. Dimana ketika saya sudah ubah datanya di dalam input dan saya tekan tombol reset maka data akan kembali seperti semula.
Langkah pertama Cara Membuat Reset Form Menggunakan AngularJs saya akan membuat bterlebih dahulu struktur htmlnya seperti di bawah ini.
<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<head>
<title>Cara Membuat Reset Form Menggunakan AngularJs</title>
</head>
<body>
<h1>Cara Membuat Reset Form Menggunakan AngularJs</h1>
<div ng-app="myApp" ng-controller="myCtrl">
<form novalidate>
First Name:<br>
<input type="text" ng-model="user.firstName"><br>
Last Name:<br>
<input type="text" ng-model="user.lastName">
<br><br>
<button ng-click="reset()">RESET</button>
</form>
<p>Update = {{user}}</p>
<p>Default = {{master}}</p>
</div>
</body>
</html>
Untuk mengaktifkan angularjs dan controllernya saya berikan direktif  ng-app=”myApp” ng-controller=”myCtrl” dimana nama parameternya akan saya gunakan menjadi. Kemudian didalam tag input saya isi dengan ng-model=”user.firstName” dan ng-model=”user.lastName” dan untuk menjalankan fungsi resetnya saya berikan ng-click=”reset()” di dalam buttom atau tombol. Dan untuk mencetak data yang sudah kita update saya cetak di tag p seperti ini di bawah ini.
<p>Update = {{user}}</p>
Dan agar kita bisa membandingan data default atau data awalnya dengan yang kita update saya juga akan cetak dengan tag p seperti di bawah ini.
<p>Default = {{master}}</p>
Jika sudah selesai, maka tahap selanjutnya kita akan membuat script angularnya seperti di bawah ini.
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.master = {firstName:"Shelli", lastName:"Ripati"};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
});
</script>
Script di atas saya buat controller terlebih dahulu dan kemudian saya buat data awalnya dengan nama master yang berisi dua data firstname dan lastname. Untuk melakukan reset data maka saya buat fungsi reset dengan variable $scope.user untuk mereset data usernya menjadi data master menggunakan angular.copy($scope.master). Maka ketika kita tekan tombol reset data di dalam input form maupun di data update yang di cetak di tag p akan otomatis berubah menjadi data awal atau data master yang kita buat.
Berikut ini tampilan ketika kita melakukan update data.
Dan berikut ini tampilan ketika kita melakukan reset data, maka data akan kembali ke awal atau defaultnya.
Demikian artikel tentang Cara Membuat Reset Form Menggunakan AngularJs. Semoga dapat bermafaat dan selamat mencoba.