Tengo mi forma 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 vuelve a estar habilitada cuando contiene texto. ¿Cómo puedo hacer que funcione?
Respuestas:
Debe 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><div ng-form="myForm"> ... stuff here .. </div>. Aunque, si usted está presentando un valor de las entradas, el pulsador, me altamente recomiendo el uso de una <form/>etiqueta, si por ninguna otra razón que permite que un usuario presione [ENTER] y enviar el formulario. Pero también es probable que constituya una mejor práctica debido a problemas de accesibilidad.
Para agregar a esta respuesta. Me acabo de enterar de que también se descompondrá si usa un guión en el nombre de su 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>myForm.$invalidque aún debería funcionar, por lo que en su caso, creo que my_formset_name0.$invaliddebería funcionar.
La respuesta seleccionada es correcta, pero alguien como yo puede tener problemas con la validación asíncrona con el envío de solicitudes al lado del servidor: el botón no se desactivará durante el procesamiento de la solicitud dada, por lo que el botón parpadeará, lo que parece bastante extraño para los usuarios.
Para anular esto, solo necesita manejar el estado $ 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>!myForm.$valideso que maneja los problemas pendientes asíncronos también. itnext.io/valid-and-invalid-in-angular-forms-61cfa3f2a0cd
Si está utilizando formularios reactivos, puede usar esto:
<button [disabled]="!contactForm.valid" type="submit" class="btn btn-lg btn primary" (click)="printSomething()">Submit</button>(click)y [disabled]no son códigos válidos de AngularJS, ni los formularios reactivos son parte del marco de AngularJS. "Angular es el nombre de Angular de hoy y de mañana. AngularJS es el nombre de todas las versiones v1.x de Angular" angular.io/guide/ajs-quick-reference
Podemos crear una directiva simple y deshabilitar el botón hasta que se completen 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');
}
});
}
};
}
);ng-disableden angular 1.xy [disabled]angular 2 | 4.x que están mucho mejor probadas que esta? En segundo lugar, ¿por qué tener una directiva que tiene un alcance en un formulario para deshabilitar un botón anidado? Es súper específico. Una solución mal pensada de la OMI.
<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