forms - disabled - Desactivar el botón de enviar cuando el formulario no es válido con AngularJS

ng disabled

Question

Tengo mi formulario así:

<form name="myForm">
    <input name="myText" type="text" ng-model="mytext" required />
    <button disabled="{{ myForm.$invalid }}">Save</button>
</form>

Como puede ver, el botón está deshabilitado si la entrada está vacía pero no cambia de nuevo a habilitada cuando contiene texto. ¿Cómo puedo hacer que funcione?

Answer 1

La respuesta seleccionada es correcta, pero alguien como yo puede tener problemas con la validación asíncrona con la solicitud de envío al lado del servidor: el botón no se desactivará durante el procesamiento de solicitud dado, por lo que el botón parpadeará, lo que resulta bastante extraño para los usuarios.

Para anular esto, solo necesita manejar el estado de $ pendiente del formulario:

<form name="myForm">
  <input name="myText" type="text" ng-model="mytext" required />
  <button ng-disabled="myForm.$invalid || myForm.$pending">Save</button>
</form>

Answer 2

Necesita usar el nombre de su formulario, así como ng-disabled: Aquí hay una demostración en Plunker

<form name="myForm">
    <input name="myText" type="text" ng-model="mytext" required />
    <button ng-disabled="myForm.$invalid">Save</button>
</form>

Answer 3

Para agregar a esta respuesta. Acabo de descubrir que también se romperá si usa un guión en su nombre de formulario (Angular 1.3):

Entonces esto no funcionará

<form name="my-form">
    <input name="myText" type="text" ng-model="mytext" required />
    <button ng-disabled="my-form.$invalid">Save</button>
</form>

Answer 4

Podemos crear una directiva simple y desactivar el botón hasta que se llenen todos los campos obligatorios.

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

angulartutorial.net/2016/04/…

Answer 5

Si está utilizando Formularios Reactivos, puede usar esto:

<button [disabled]="!contactForm.valid" type="submit" class="btn btn-lg btn primary" (click)="printSomething()">Submit</button>

Answer 6

<form name="myForm">
        <input name="myText" type="text" ng-model="mytext" required/>
        <button ng-disabled="myForm.$pristine|| myForm.$invalid">Save</button>
</form>

Si quieres ser un poco más estricto