Pulsante di disabilitazione Angular2


113

So che in angular2 posso disabilitare un pulsante con l' [disable]attributo, ad esempio:

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

ma posso farlo usando [ngClass]o [ngStyle]? Così:

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

Grazie.


1
qui sta lavorando plnkr per lo stesso plnkr.co/edit/MW3vT4XscWcKrDdAwBoE?p=preview
Pardeep Jain

Risposte:


173

Aggiornare

Mi sto chiedendo. Perché non vuoi utilizzare l' [disabled]attributo binding fornito da Angular 2? È il modo corretto per affrontare questa situazione. Ti propongo di spostare l' isValidassegno tramite il metodo dei componenti.

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

Il problema con ciò che hai provato è spiegato di seguito

Fondamentalmente potresti usare ngClassqui. Ma l'aggiunta di una classe non limita l'attivazione dell'evento. Per attivare l'evento su un input valido, è necessario modificare il clickcodice dell'evento in basso. Quindi onConfirmverrà attivato solo quando il campo è valido.

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

Demo qui


Bene, aggiungo che ngClass è già presente nel pulsante, quindi mi sembra che sia necessario che ci sia disabilitato, perché è preferibile il modo [disabilitato]?
Nir Schwartz,

@NirSchwartz perché farà entrambe le cose contemporaneamente .. le regole CSS del selettore verranno applicate button[disabled]all'evento basato sul selettore e disabilitato limiterà l' clickevento a attivarsi sul pulsante .. in ngClassclasse devi gestirlo da solo, come ho mostrato in sopra risposta ..
Pankaj Parkar

Il motivo per cui le persone vogliono usare [attr.disabled] invece di [disabled] è perché [disabled] di Angular FormControl non può essere impostato dinamicamente. Ecco il numero github.com/angular/angular/issues/11271
davyzhang

1
Non dovresti chiamare un metodo in un'associazione di modelli. [disabled]="!isValid"
Tom

3
Ahhaa .. se il metodo ha solo un riferimento a una variabile, allora va bene .. Se hai una logica complessa all'interno di una funzione, allora non è preferibile. Hai ragione, in questo caso posso chiamare direttamente isValidflag sull'interfaccia utente
Pankaj Parkar

39

Suggerirei quanto segue.

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

4
Non è meglio evitare le chiamate di funzione in html, come verrà chiamato ogni tick / ciclo?
John



5

Usare ngClassper disabilitare il pulsante per la forma non valida non è una buona pratica in Angular2 quando fornisce funzionalità integrate per abilitare e disabilitare il pulsante se il modulo è valido e non valido rispettivamente senza fare alcuno sforzo / logica extra.

[disabled] farà tutto come se il modulo fosse valido, verrà abilitato e se il modulo non fosse valido verrà disabilitato automaticamente.

Vedi esempio:

<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="">


3

Può essere sotto il codice può aiutare:

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

Questa non è una buona soluzione poiché <button disabled="">o <button disabled="false">è ancora gestita come un pulsante disabilitato nella maggior parte dei browser
BillyTom

2

Ho provato a utilizzare disabilitato insieme all'evento clic. Di seguito è riportato lo snippet, anche la risposta accettata ha funzionato perfettamente, aggiungo questa risposta per fornire un esempio di come può essere utilizzata con proprietà disabilitate e clic.

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

2

Se stai usando moduli reattivi e vuoi disabilitare alcuni input associati a un controllo modulo, dovresti inserire questa disabledlogica nel tuo codice e chiamare yourFormControl.disable()oyourFormControl.enable()


2

Penso che questo sia il modo più semplice

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

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

.ts codice

setStyles() 
{
    let styles = {

    'action-button-disabled': this.model.IsConnected() == false  
  };
  return styles;
}
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.