AngularJS: menonaktifkan semua kontrol formulir antara pengiriman dan respons server

122

Saya memiliki dilema tentang pendekatan apa yang terbaik (dan benar) jika saya ingin menonaktifkan kontrol formulir (atau setidaknya membuatnya tidak tersedia untuk interaksi pengguna) selama periode waktu ketika pengguna mengklik tombol "Simpan" atau "Kirim" dan data berjalan melalui kabel. Saya tidak ingin menggunakan JQuery (yang jahat !!!) dan menanyakan semua elemen sebagai array (berdasarkan penanda kelas atau atribut) Ide yang saya miliki sejauh ini adalah:

Tandai semua elemen dengan cm-form-controlperintah khusus yang akan berlangganan 2 pemberitahuan: "data-sent" dan "data-processing". Kemudian kode khusus bertanggung jawab untuk mendorong pemberitahuan kedua atau menyelesaikan sebuah janji.
Gunakan promiseTrackeryang (sayangnya!) Memaksa untuk menghasilkan kode yang sangat bodoh seperti ng-show="loadingTracker.active()". Jelas tidak semua elemen memiliki ng-disableddan saya tidak ingin pengguna ng-hide/showmenghindari tombol "menari".
Gigit peluru dan tetap gunakan JQuery

Apakah ada yang punya ide yang lebih baik? Terima kasih sebelumnya!

DIPERBARUI: Ide fieldset BERLAKU. Berikut ini biola sederhana bagi mereka yang masih ingin melakukan hal yang sama http://jsfiddle.net/YoMan78/pnQFQ/13/

HTML:

<div ng-app="myApp">
    <ng-form ng-controller="myCtrl">
        Saving: {{isSaving}}
        <fieldset ng-disabled="isSaving">
            <input type="text" ng-model="btnVal"/>
            <input type="button" ng-model="btnVal" value="{{btnVal}}"/>
            <button ng-click="save()">Save Me Maybe</button>
        </fieldset>
    </ng-form>
</div>

dan JS:

var angModule = angular.module("myApp", []);

angModule.controller("myCtrl", function ($scope, $filter, $window, $timeout) {
    $scope.isSaving = undefined;
    $scope.btnVal = 'Yes';
    $scope.save = function()
    {
        $scope.isSaving = true;
        $timeout( function()
             {
                 $scope.isSaving = false;
                 alert( 'done');
             }, 10000);
    };
});

— YoMan78
sumber

layanan apa yang Anda gunakan untuk mengirim data dari formulir? $ http atau $ resource?

— François Romain

Ini sebenarnya $ http karena saya tidak perlu berurusan dengan apa pun yang luar biasa.

— YoMan78

Fieldets yang dinonaktifkan tidak berfungsi di IE, yaitu bukan solusi. Saya menggunakan modal Bootstrap dan mengatur latar belakang menjadi statis.

— im1dermike

Perhatikan bahwa pada saat penulisan ada bug di mana fieldsettidak dapat digunakan sebagai wadah flexbox

— George Mauer

Jawaban:

283

Bungkus semua bidang Anda di fieldset dan gunakan direktif ngDisabled seperti ini:

<fieldset ng-disabled="isSaving"> ... inputs ...</fieldset>

Ini secara otomatis akan menonaktifkan semua input di dalam fieldset.

Kemudian dalam pengontrol diatur $scope.isSavingke truesebelum panggilan http dan falsesetelah.

— Alexander Puchkov
sumber

Sepertinya ini benar-benar berfungsi dengan baik bahkan dengan <button>! Terima kasih banyak Sasha.

— YoMan78

Ini tip yang bagus, meskipun sayangnya atribut yang dinonaktifkan pada fieldset tidak didukung di IE atau Safari w3schools.com/tags/att_fieldset_disabled.asp

— kiwiaddo

@kiwiaddo Ini bekerja dengan baik di IE9 + dalam pengujian saya. Omong-omong, w3schools.com bukanlah situs referensi terbaik. Lebih baik periksa halaman ini developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset

— Alexander Puchkov

Tombol jenis input, teks, dan file tidak dinonaktifkan di IE11 :-(, tombol juga berwarna abu-abu tetapi handler ng-click-angular masih aktif.

— Sebastian

@ im1dermike Anda benar, itu memang tidak berfungsi di IE. Gaya bidang secara visual dinonaktifkan, tetapi pengguna masih dapat berinteraksi dengannya dan mengeditnya seolah-olah telah diaktifkan. Ada bug di IE untuk ini sudah dikirim dan sudah diperbaiki, tapi belum dikirim. Ini akan tersedia di rilis utama IE berikutnya connect.microsoft.com/IE/feedbackdetail/view/962368/…

— Alexander Puchkov

-5

Ada solusi sederhana di peramban modern:

tentukan kelas css

.disabled {
  pointer-events: none;
  ... ...
}

tambahkan kelas ini ke ng-form

<ng-form data-ng-class="{ 'disabled': isSaving }"> ... inputs ... </ng-form>

Berikut adalahbagan dukungan peristiwa penunjuk .

Catatan: bahkan jika Anda menyetelnya pointer-events: none, Anda masih bisa tab ke elemen masukan dengan keyboard Anda.

— Raoh
sumber