Botón de desactivación en angular 2 con dos condiciones

¿Es esto posible en Angular 2?

<button type="submit" [disabled]="!validate && !SAForm.valid">Add</button>

Espero que si ambas condiciones son verdaderas habiliten el botón.

Ya he probado el código anterior pero no funciona como se esperaba.

Solución

Parece que necesitas un quirófano en su lugar:

Add

Esto desactivará el botón si no se valida o si no es SAForm.valid.

Comentarios (2)

Declarar una variable en component.ts e inicializarla con algún valor

 buttonDisabled: boolean;

  ngOnInit() {
    this.buttonDisabled = false;
  }

Ahora en el .html o en la plantilla, puedes poner el siguiente código:

 Click Me 

Ahora puedes activar/desactivar el botón cambiando el valor de la variable buttonDisabled.

Comentarios (2)

¿Es esto posible en Angular 2?

Sí, es posible.

Si ambas condiciones son verdaderas, ¿habilitarán el botón?

No, si son verdaderas, entonces el botón será deshabilitado. `disabled="true".

Pruebo el código anterior pero no funciona bien

¿Qué esperabas? el botón se desactivará cuando valid sea falso y el angular formGroup, SAForm no sea válido.

Una recomendación aquí también, por favor, haz que el botón sea de tipo button y no submit porque esto puede hacer que todo el formulario se envíe y tendrías que usar invalidate y escuchar a (ngSubmit).

Comentarios (6)