Posso attivare un invio di modulo da un controller?

Question

Mi piacerebbe inviare un modulo tradizionale da un controller. Lo scenario è che voglio colpire un percorso sul mio server web e reindirizzare alla sua risposta, cosa che posso fare con un modulo regolare in HTML, ma voglio anche fare una certa validazione sui suoi campi quando viene premuto il pulsante di invio, e se la validazione fallisce, non voglio fare il percorso.

Sono a conoscenza di ng-valid, ma voglio solo che la validazione avvenga quando si preme il pulsante.

Esiste un modo per inviare un modulo in modo condizionale all'interno di un controller?

Answer 1

Hai provato a utilizzare la direttiva ng-submit nel modulo? È possibile restituire true/false dopo la convalida.

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 (non necessario disporre di un attributo action)

<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

Come circa appena fuori a destra la disattivazione del pulsante di invio fino a quando il modulo è valido:

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

Dai un'occhiata a questa domanda simile che ho avuto: AngularJS Form Validation with Directives - "myform.$valid" not quite right for me

Answer 3

È possibile aggiungere il metodo di invio a un FormController. Ho fatto così:

<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

Questo è 'non è il angolare' modo di farlo, ma è possibile inviare il modulo utilizzando JavaScript vaniglia. Per esempio si può dare la forma un id e fare:

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

o se si dispone di un pulsante di invio è possibile fare clic:

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

ho scoperto che il primo non ha fatto mantenere i binding di dati (lo stavo usando su un progetto con un widget JQuery che non aveva alternative Angular), ma il secondo manteneva i binding. Presumo che questo abbia a che fare con come è stato scritto il widget JQuery.

Si può vedere di più su innescando forme con JS vaniglia qui:

How to submit a form using javascript?

Answer 5

espansione da @ risposta di ReklatsMasters, se si desidera modificare un valore prima di inviare il modulo, si potrebbe fare in questo modo ...

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