Come consentire ng clic quando il pulsante è disattivato in Angularjs

Question

ho avere la seguente forma:

<form name="formuser" action='/signup' method='post' novalidate> 

    <input type="text" name="firstname" ng-model="firstname" ng-class="{ 'has-error' : (formuser.firstname.$invalid && !formuser.firstname.$pristine) || hasSubmitted}" required /> 

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

Sto cercando di aggiungere la classe 'ha-error' al campo di inserimento che non è valido dopo il l'utente ha digitato qualcosa o ha premuto il pulsante di invio mentre l'input è ancora intatto. Ho aggiunto ng-disabled al pulsante di invio per disabilitare l'invio del modulo, ma voglio comunque che il ng-clic faccia clic per modificare l'ambito hasSmitted. Il problema è che ng-disable sul pulsante disabilita anche il ng-click.

So che potrei sempre utilizzare ng-submit sul modulo, effettuare la convalida nel mio controller e quindi attivare una richiesta Ajax ma il mio framework di autenticazione richiede che io in realtà invii il modulo e reindirizzi il browser.

Answer 1

Bene, invece di fare hack la soluzione più pulita sarebbe quella di rendere il pulsante abilitato e solo gestire il submit utilizzando la semplice direttiva:

angular.module('common', []).directive('preventSubmit', function() { 
    return { 
     restrict: 'A', 
     scope: { 
      preventSubmit: '=' 
     }, 
     link: function (scope, element) { 
      element.bind('submit', function(e) { 
       if (scope.preventSubmit) { 
        e.preventDefault(); 
       } 
      }); 
     } 
    } 
}); 

Quindi, in che modo si associa all'evento di invio e se il il modulo non è valido impedisce al modulo di inviare. Se non usi l'attributo action Angular lo gestisce automaticamente e puoi gestirlo ma in caso di azione specificata e invio normale questa direttiva può essere molto utile.

E nella marcatura:

<form name="formuser" action='/signup' method='post' 
     novalidate prevent-submit="formuser.$invalid"> 
    ... 
    <button type="submit" ng-click="hasSubmitted=true">Submit</button> 
</form> 

E usando ng-ng stile o di classe è possibile lo stile il pulsante come previsto a seconda del vostro stato di forma.

Answer 2

Si poteva avvolgerlo in un altro elemento:

<span ng-click="hasSubmitted=true"> 
    <button type="submit" ng-class="{noclick:formuser.$invalid}" ng-disabled="formuser.$invalid">Submit</button> 
</span> 

CSS:

.noclick { 
    pointer-events: none; 
} 

Answer 3

Sostituire button con div. ng-click verrà generato anche se il div è disabilitato.

Vedere this post per ulteriori dettagli.

BTW, è necessario impostare lo stile del pulsante sul div. In bocca al lupo.

Answer 4

Invece di impostare l'input su disabled, impostarlo su readonly. Ciò consentirà ai ng-clic di continuare a funzionare.