Mengklik tombol dalam formulir menyebabkan penyegaran halaman

Saya memiliki formulir di Angular yang memiliki dua tag tombol di dalamnya. Satu tombol mengirimkan formulir ng-click. Tombol lainnya murni untuk navigasi menggunakan ng-click. Namun, ketika tombol kedua ini diklik, AngularJS menyebabkan refresh halaman yang memicu 404. Saya telah menjatuhkan breakpoint pada fungsi dan itu memicu fungsi saya. Jika saya melakukan salah satu dari yang berikut ini, itu akan berhenti:

1. Jika saya menghapus ng-click, tombol tidak menyebabkan penyegaran halaman.
2. Jika saya berkomentar kode dalam fungsi, itu tidak menyebabkan penyegaran halaman.
3. Jika saya mengubah tag tombol menjadi anchor tag ( <a>) dengan href="", maka itu tidak menyebabkan penyegaran.

Yang terakhir sepertinya solusi yang paling sederhana, tetapi mengapa AngularJS bahkan menjalankan kode apa pun setelah fungsi saya yang menyebabkan halaman dimuat ulang? Sepertinya ada bug.

Ini formulirnya:

<form class="form-horizontal" name="myProfile" ng-switch-when="profile">
  <fieldset>
    <div class="control-group">
      <label class="control-label" for="passwordButton">Password</label>
      <div class="controls">
        <button id="passwordButton" class="secondaryButton" ng-click="showChangePassword()">Change</button>
      </div>
    </div>

    <div class="buttonBar">
      <button id="saveProfileButton" class="primaryButton" ng-click="saveUser()">Save</button>
    </div>
  </fieldset>
</form>

Berikut adalah metode pengontrol:

$scope.showChangePassword = function() {
  $scope.selectedLink = "changePassword";
};

Jika Anda melihat spesifikasi W3C , sepertinya hal yang jelas untuk dicoba adalah menandai elemen tombol type='button'Anda ketika Anda tidak ingin mereka mengirimkannya.

Hal yang perlu diperhatikan secara khusus adalah di mana dikatakan

Elemen tombol tanpa atribut tipe yang ditentukan mewakili hal yang sama dengan elemen tombol dengan atribut tipenya disetel ke "kirim"

Anda dapat mencoba mencegah penangan default:

html:

<button ng-click="saveUser($event)">

js:

$scope.saveUser = function (event) {
  event.preventDefault();
  // your code
}

Anda harus mendeklarasikan atribut ng-submit={expression}dalam <form>tag Anda .

Dari dokumen ngSubmit http://docs.angularjs.org/api/ng.directive:ngSubmit

Memungkinkan pengikatan ekspresi sudut untuk mengirimkan peristiwa.

Selain itu mencegah tindakan default (yang untuk formulir berarti mengirim permintaan ke server dan memuat ulang halaman saat ini).

Saya menggunakan arahan untuk mencegah perilaku default:

module.directive('preventDefault', function() {
    return function(scope, element, attrs) {
        angular.element(element).bind('click', function(event) {
            event.preventDefault();
            event.stopPropagation();
        });
    }
});

Dan kemudian, dalam html:

<button class="secondaryButton" prevent-default>Secondary action</button>

Arahan ini juga dapat digunakan dengan <a>dan semua tag lainnya

Anda dapat menyimpan <button type="submit">, tetapi harus menghapus atribut action=""dari <form>.

Saya heran mengapa tidak ada yang mengusulkan solusi yang paling sederhana:

jangan gunakan a <form>

A <whatever ng-form>tidak IMHO pekerjaan yang lebih baik dan tanpa bentuk HTML, tidak ada yang dikirimkan oleh browser itu sendiri. Perilaku yang persis tepat saat menggunakan sudut.

Tambahkan tindakan ke formulir Anda.

<form action="#">

Jawaban ini mungkin tidak terkait langsung dengan pertanyaan. Ini hanya untuk kasus ketika Anda mengirimkan formulir menggunakan skrip.

Menurut ng-kirim kode

 var handleFormSubmission = function(event) {
  scope.$apply(function() {
    controller.$commitViewValue();
    controller.$setSubmitted();
  });

  event.preventDefault();
};

formElement[0].addEventListener('submit', handleFormSubmission);

Itu menambahkan mengirimkan pendengar acara di formulir. Tetapi ajang event handler tidak akan dipanggil ketika ajukan diawali dengan memanggil form.submit (). Dalam hal ini, ng-kirim tidak akan mencegah tindakan default, Anda harus memanggil preventDefault sendiri di ng-submit handler;

Untuk memberikan jawaban yang cukup pasti, Algoritma Pengajuan Formulir HTML item 5 menyatakan bahwa formulir hanya mengirim acara pengiriman jika tidak dikirim dengan memanggil metode kirim (yang berarti hanya mengirimkan acara pengiriman jika diserahkan oleh tombol atau implisit lainnya) metode, misalnya menekan enter saat fokus pada elemen teks tipe input).

Lihat Formulir yang dikirimkan menggunakan submit () dari tautan yang tidak dapat ditangkap oleh onsub handler

Tombol Pertama mengirimkan formulir dan yang kedua tidak

<body>
<form  ng-app="myApp" ng-controller="myCtrl" ng-submit="Sub()">
<div>
S:<input type="text" ng-model="v"><br>
<br>
<button>Submit</button>
//Dont Submit
<button type='button' ng-click="Dont()">Dont Submit</button>
</div>
</form>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.Sub=function()
{
alert('Inside Submit');
}

$scope.Dont=function()
{
$scope.v=0;
}
});
</script>

</body>

Cukup tambahkan FormsModuledalam importsarray app.module.tsfile, dan tambahkan import { FormsModule } from '@angular/forms';di bagian atas file ini ... ini akan berfungsi.