Czy mogę wyzwolić formularz przesłany z kontrolera?

Question

Chciałbym wykonać tradycyjny formularz z poziomu kontrolera. Scenariusz polega na tym, że chcę trafić trasę na moim serwerze i przekierować do jej odpowiedzi, co mogę zrobić za pomocą zwykłego formularza w HTML, ale chcę również dokonać sprawdzenia poprawności na jego polach po naciśnięciu przycisku przesyłania, oraz jeśli walidacja nie powiedzie się, nie chcę robić trasy.

Jestem świadomy ng-valid, ale chcę, aby sprawdzanie poprawności odbywało się po naciśnięciu przycisku.

Czy istnieje sposób warunkowego wypełnienia formularza z poziomu kontrolera?

Answer 1

Czy próbowałeś użyć dyrektywy ng-submit w swoim formularzu? Możesz zwrócić true/false po sprawdzeniu poprawności.

Controller

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 (nie musi mieć cechę działania)

<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> 

Answer 2

Jak o właśnie z prawej wyłączyć przycisk Prześlij, aż forma jest poprawna:

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

Zobacz podobne pytanie, które miałem: AngularJS Form Validation with Directives - "myform.$valid" not quite right for me

Answer 3

Możesz dodać metodę submit do FormController. Zrobiłem to:

<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(); 
    } 
    }; 
}]) 

Answer 4

Jest to sposób "nie Angular", ale możesz przesłać formularz za pomocą wanilii javascript. Dla przykładu można podać postaci identyfikatora i zrobić:

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

lub jeśli masz przycisk Prześlij można go kliknąć:

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

Okazało się, że pierwszy z nich nie zachowaj powiązania danych (używałam go w projekcie z widżetem JQuery, który nie zawierał opcji Angular), ale drugi zachował powiązania. Zakładam, że ma to związek z tym, jak został napisany widget JQuery.

można dowiedzieć się więcej o wyzwolenie formy z JS wanilii tutaj:

How to submit a form using javascript?

Answer 5

Rozwiń od @ odpowiedź ReklatsMasters, o ile chcesz zmienić wartość przed złożeniem formularza, można zrobić jak tak ...

<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); 
    } 
    }; 
}])