2015-01-17 22 views
5

ho creato un caso isolato del mio problema: http://plnkr.co/edit/6LXW5TG76LC9LNSrdpQCAngularJS - Prevenire presentazione di un modulo se esso è valido

ecco il codice del caso isolato:

<!DOCTYPE html> 
<html ng-app="App"> 

    <head></head> 

    <body ng-controller="ExampleController"> 

    <form name="form" ng-submit="submit()" novalidate> 
     <input type="number" name="number" ng-model="number" required><br> 
     <span ng-show="form.number.$error.required && form.number.$touched">Required<br></span> 
     <span ng-show="form.number.$error.number">Not a number<br></span> 
     <input type="submit"> 
    </form> 

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script> 

    <script> 

     var App = angular.module('App', []); 

     App.controller('ExampleController', function($scope) { 

     $scope.submit = function() { 
      alert('send to server: ' + $scope.number); 
     } 

     }); 

     App.run(); 

    </script> 

    </body> 

</html> 

In sostanza, l'esempio contiene un campo numerico e al di sotto ci sono dei messaggi di errore che mostrano quando l'input non è valido (vuoto o non un numero).

Ma il modulo verrà ancora inviato e, sebbene il valore del campo sia impostato su "indefinito" se non è valido, preferirei un modo per verificare se il modulo è valido prima di inviarlo al server (la casella di avviso in questo esempio).

Quindi la mia domanda è: in AngularJS, c'è un modo per verificare se un modulo è valido all'interno di un controller? O un altro modo per impedire a un modulo di inviarlo se non è valido?

risposta

11

Meglio cambiano in ng-submit espressione

ng-submit="form.$valid && submit()" 

Miglior uso dell'espressione direttiva angolare.

+1

mi piace questo uno il migliore, sì me lo faccio – meffect

+0

@meffect pulito e ordinato sull'interfaccia utente stessa .. ho usato questo quasi in tutte le mie forme .. –

1

Si può provare con ng-disabile direttiva

 <button type="submit" ng-disabled='number==null'>Submit</button> 

In questo modo è possibile evitare di aggiungere ulteriore codice

Problemi correlati