Pertanyaan Dapatkah saya memicu pengiriman formulir dari pengontrol?


Saya ingin mengirimkan formulir tradisional dari dalam pengontrol. Skenarionya adalah saya ingin menekan rute di server web saya dan mengarahkan kembali ke responsnya, yang dapat saya lakukan dengan bentuk reguler dalam HTML, tetapi saya juga ingin melakukan validasi di bidangnya ketika tombol submit ditekan, dan jika validasi gagal, saya tidak ingin melakukan rute.

Saya sadar ng-valid, tapi saya hanya ingin validasi dilakukan ketika tombol dipukul.

Apakah ada cara untuk mengirimkan formulir secara kondisional dari dalam controller?


32
2018-04-14 19:11


asal


Jawaban:


Anda dapat menambahkan metode kirim ke FormController. Saya melakukannya:

<form ng-form-commit action="/" name='payForm' method="post" target="_top">
    <input type="hidden" name="currency_code" value="USD">
    <button type='button' ng-click='save(payForm)'>buy</button>
</form>

.directive("ngFormCommit", [function(){
    return {
        require:"form",
        link: function($scope, $el, $attr, $form) {
            $form.commit = function() {
                $el[0].submit();
            };
        }
    };
}])

.controller("AwesomeCtrl", ["$scope", function($scope){
   $scope.save = function($form) {
     if ($form.$valid) {
         $form.commit();
     }
   };
}])

33
2017-08-03 08:04



Apakah Anda mencoba menggunakan instruksi ng-submit pada formulir Anda? Anda dapat mengembalikan true / false setelah validasi Anda.

Kontroler

app.controller('MainCtrl', ['$location', function($scope, $location) {
  $scope.submit = function(user) {
    var isvalid = true;
    // validation 
    if (isvalid) {
        $http.get('api/check_something', {}).then(function(result) {
            $location.path(result.data);
        });
        return true;
    }
    return false; //failed
  }
});

Html (Anda tidak boleh memiliki atribut aksi)

<form name="formuser" ng-submit="submit(user)">
    <input type="text" ng-model="user.firstname" />
    <input type="text" ng-model="user.lastname" />
    <button type="submit">Submit</button>
</form>

8
2018-04-14 19:57



Ini adalah cara 'tidak Sudut' untuk melakukannya tetapi Anda dapat mengirimkan formulir menggunakan javascript vanilla. Misalnya Anda dapat memberikan formulir id dan lakukan:

document.getElementById('myForm').submit()

atau jika Anda memiliki tombol submit, Anda dapat mengkliknya:

document.getElementById('myForm-submit').click()

Saya menemukan bahwa yang pertama tidak menyimpan data bindings (saya menggunakannya pada proyek dengan widget JQuery yang tidak memiliki alternatif Sudut), tetapi yang kedua menyimpan binding. Saya berasumsi ini ada hubungannya dengan bagaimana widget JQuery ditulis.

Anda dapat melihat lebih lanjut tentang memicu formulir dengan vanilla JS di sini:

Bagaimana cara mengirimkan formulir menggunakan javascript?


3
2017-07-14 14:26



Bagaimana jika hanya menonaktifkan tombol kirim kanan hingga formulir valid:

<button type="submit" ng-disabled="form.$invalid">Submit</button>

Lihatlah pertanyaan serupa yang saya miliki: Validasi Formulir AngularJS dengan Direktif - "myform. $ Valid" tidak tepat untuk saya


0
2018-04-15 16:41



Memperluas dari jawaban @ ReklatsMasters, jika Anda ingin mengubah nilai sebelum mengirimkan formulir, Anda bisa melakukan seperti itu ...

<form ng-form-commit action="/" name='payForm' method="post" target="_top">
    <input type="hidden" id="currency_code" name="currency_code" value="USD">
    <button type='button' ng-click='save('GBP', payForm)'>buy</button>
</form>

.directive("ngFormCommit", [function(){
    return {
        require:"form",
        link: function($scope, $el, $attr, $form) {
            $form.commit = function($newCurrency) {
                $el[0].querySelector('#currency_code').value = $newCurrency;
                $el[0].submit();
            };
        }
    };
}])

.controller("AwesomeCtrl", ["$scope", function($scope){
   $scope.save = function($newCurrency, $form) {
     if ($form.$valid) {
         $form.commit($newCurrency);
     }
   };
}])

0
2017-11-08 19:24



$scope.payForm.$setSubmitted();

Setel formulir ke status $ yang dikirimkan. Ini juga akan menetapkan $ dikirimkan pada semua formulir bentuk anak dan orang tua

https://docs.angularjs.org/api/ng/type/form.FormController#$ setDitagih


0
2017-07-23 12:58