Ho la mia forma in questo modo:
<form name="myForm">
<input name="myText" type="text" ng-model="mytext" required />
<button disabled="{{ myForm.$invalid }}">Save</button>
</form>Come puoi vedere, il pulsante è disabilitato se l'input è vuoto ma non torna ad essere abilitato quando contiene testo. Come posso farlo funzionare?
Risposte:
Devi usare il nome del tuo modulo, oltre a ng-disabled: ecco una demo su Plunker
<form name="myForm">
<input name="myText" type="text" ng-model="mytext" required />
<button ng-disabled="myForm.$invalid">Save</button>
</form><div ng-form="myForm"> ... stuff here .. </div>. Tuttavia, se stai inviando un valore dagli input, alla pressione del pulsante, ti consiglio vivamente di utilizzare un <form/>tag, se non altro per consentire a un utente di premere [INVIO] e inviare il modulo. Ma probabilmente costituisce anche una migliore pratica a causa di problemi di accessibilità.
Da aggiungere a questa risposta. Ho appena scoperto che si romperà anche se usi un trattino nel nome del tuo modulo (Angolare 1.3):
Quindi questo non funzionerà:
<form name="my-form">
<input name="myText" type="text" ng-model="mytext" required />
<button ng-disabled="my-form.$invalid">Save</button>
</form>myForm.$invaliddovrebbe ancora funzionare, quindi nel tuo caso, penso che my_formset_name0.$invaliddovrebbe funzionare.
La risposta selezionata è corretta, ma qualcuno come me potrebbe avere problemi con la convalida asincrona con l'invio della richiesta al lato server - il pulsante non verrà disabilitato durante l'elaborazione della richiesta, quindi il pulsante lampeggerà, il che sembra piuttosto strano per gli utenti.
Per annullare ciò, devi solo gestire $ lo stato del modulo in sospeso:
<form name="myForm">
<input name="myText" type="text" ng-model="mytext" required />
<button ng-disabled="myForm.$invalid || myForm.$pending">Save</button>
</form>!myForm.$validquesto per gestire i problemi in sospeso asincroni. itnext.io/valid-and-invalid-in-angular-forms-61cfa3f2a0cd
Se stai usando i moduli reattivi puoi usare questo:
<button [disabled]="!contactForm.valid" type="submit" class="btn btn-lg btn primary" (click)="printSomething()">Submit</button>(click)e [disabled]non sono validi i codici AngularJS, né Reactive Forms fa parte del framework AngularJS. "Angular è il nome dell'Angular di oggi e di domani. AngularJS è il nome di tutte le versioni v1.x
Siamo in grado di creare una semplice direttiva e disabilitare il pulsante fino a quando tutti i campi obbligatori sono compilati.
angular.module('sampleapp').directive('disableBtn',
function() {
return {
restrict : 'A',
link : function(scope, element, attrs) {
var $el = $(element);
var submitBtn = $el.find('button[type="submit"]');
var _name = attrs.name;
scope.$watch(_name + '.$valid', function(val) {
if (val) {
submitBtn.removeAttr('disabled');
} else {
submitBtn.attr('disabled', 'disabled');
}
});
}
};
}
);ng-disabledin angolare 1.xe [disabled]angolare 2 | 4.x che sono molto meglio testate di così ?. In secondo luogo, perché avere una direttiva con ambito in un modulo per disabilitare un pulsante nidificato, è super specifica. Una soluzione mal pensata IMO.
<form name="myForm">
<input name="myText" type="text" ng-model="mytext" required/>
<button ng-disabled="myForm.$pristine|| myForm.$invalid">Save</button>
</form>Se vuoi essere un po 'più severo