html - navigationend - title angular 6

Botón de desactivación Angular2

Question

Sé que en angular2 puedo deshabilitar un botón con el atributo [disable] , por ejemplo:

<button [disabled]="!isValid" (click)="onConfirm()">Confirm</button>

pero ¿puedo hacerlo usando [ngClass] o [ngStyle] ? Al igual que:

<button [ngStyle]="{disabled : !isValid}" (click)="onConfirm()">Confirm</button>

Gracias.

Answer 1

Actualizar

Me pregunto. ¿Por qué no desea utilizar el enlace de atributo [disabled] proporcionado por Angular 2? Es la forma correcta de lidiar con esta situación. Le propongo que mueva su cheque isValid través del método de componente.

<button [disabled]="! isValid" (click)="onConfirm()">Confirm</button>

El problema con lo que probaste se explica a continuación

Básicamente, podría usar ngClass aquí. Pero agregar clase no restringiría la activación del evento. Para activar el evento en una entrada válida, debe cambiar el código del evento de click a continuación. De modo que onConfirm se disparará solo cuando el campo sea válido.

<button [ngClass]="{disabled : !isValid}" (click)="isValid && onConfirm()">Confirm</button>

plnkr.co/edit/MW3vT4XscWcKrDdAwBoE?p=preview

Answer 2

Creo que esta es la forma más fácil.

<!-- Submit Button-->
<button
mat-raised-button
color="primary"
[disabled]="!f.valid"
>
Submit
</button>

Answer 3

El uso de ngClass para deshabilitar el botón de forma no válida no es una buena práctica en Angular2 cuando proporciona características incorporadas para habilitar y deshabilitar el botón si el formulario es válido e inválido respectivamente sin hacer ningún esfuerzo / lógica adicional.

[disabled] hará todo como si el formulario es válido, entonces se habilitará y si el formulario no es válido, se desactivará automáticamente.

Ver ejemplo:

<form (ngSubmit)="f.form.valid" #f="ngForm" novalidate>
<input type="text" placeholder="Name" [(ngModel)]="txtName" name="txtname" #textname="ngModel" required>
<input type="button" class="mdl-button" [disabled]="!f.form.valid" (click)="onSave()" name="">

Answer 4

Puede estar debajo del código puede ayudar:

<button [attr.disabled]="!isValid ? true : null">Submit</button>

Answer 5

Si está utilizando formularios reactivos y desea deshabilitar alguna entrada asociada con un control de formulario, debe colocar esta lógica disabled en su código y llamar a yourFormControl.disable() o yourFormControl.enable()

Answer 6

Si tiene un formulario, también es posible lo siguiente:

<form #f="ngForm">
<input name="myfield" type="text" minlenght="3" required ngModel>
<button type="submit" [disabled]="!f.valid">Submit</button>
</form>

Demostración aquí: http://plnkr.co/edit/Xm2dCwqB9p6WygrquUGh?p=preview&open=app%2Fapp.component.ts

Answer 7

Traté de usar deshabilitado junto con evento de clic. A continuación se muestra el fragmento, la respuesta aceptada también funcionó perfectamente bien, estoy agregando esta respuesta para dar un ejemplo de cómo se puede usar con propiedades deshabilitadas y de clic.

<button (click)="!planNextDisabled && planNext()" [disabled]="planNextDisabled"></button>

Answer 8

Yo recomendaría lo siguiente.

<button [disabled]="isInvalid()">Submit</button>

Answer 9

sí tu puedes

<div class="button" [ngClass]="{active: isOn, disabled: isDisabled}"
(click)="toggle(!isOn)">
Click me!
</div>

https://angular.io/docs/ts/latest/api/common/NgClass-directive.html

Answer 10

 <button [disabled]="this.model.IsConnected() == false"
[ngClass]="setStyles()"
class="action-button action-button-selected button-send"
(click)= "this.Send()">
SEND
</button>

código .ts

setStyles()
{
let styles = {
''action-button-disabled'': this.model.IsConnected() == false
};
return styles;
}