Angular2-Deaktivierungstaste

113

Ich weiß das in angle2 eine Schaltfläche mit dem [disable]Attribut deaktivieren kann , zum Beispiel:

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

aber kann ich es mit [ngClass]oder machen[ngStyle] ? Wie so:

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

Vielen Dank.

Nir Schwartz
quelle
1
Hier arbeitet plnkr für das gleiche plnkr.co/edit/MW3vT4XscWcKrDdAwBoE?p=preview
Pardeep Jain

Antworten:

173

Aktualisieren

Ich frage mich. Warum möchten Sie nicht [disabled]die von Angular 2 bereitgestellte Attributbindung verwenden? Es ist der richtige Weg, um mit dieser Situation umzugehen. Ich schlage vor, Sie verschieben Ihren isValidScheck über die Komponentenmethode.

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

Das Problem mit dem, was Sie versucht haben, wird unten erklärt

Grundsätzlich könnte man ngClasshier verwenden. Das Hinzufügen einer Klasse würde das Auslösen des Ereignisses jedoch nicht einschränken. Um ein Ereignis bei einer gültigen Eingabe auszulösen, sollten Sie den clickEreigniscode wie folgt ändern . Das onConfirmwird also nur ausgelöst, wenn das Feld gültig ist.

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

Demo hier

Pankaj Parkar
quelle
Nun, ich füge diese ngClass bereits in der Schaltfläche hinzu, so dass es für mich so aussieht, als ob deaktiviert sein muss. Warum wird der [deaktivierte] Weg bevorzugt?
Nir Schwartz
@NirSchwartz, weil es beide Dinge gleichzeitig erledigt. Selektor-CSS-Regeln werden auf button[disabled]selektorbasiertes und deaktiviertes Ereignis angewendet. Das Ereignis wird so eingeschränkt click, dass es auf der Schaltfläche ausgelöst wird . In der ngClassKlasse müssen Sie es selbst behandeln, wie ich in gezeigt habe obige Antwort ..
Pankaj Parkar
Der Grund, warum Benutzer [attr.disabled] anstelle von [disabled] verwenden möchten, liegt darin, dass [deaktiviert] von FormControl nicht dynamisch festgelegt werden kann. Hier ist die Ausgabe github.com/angular/angular/issues/11271
davyzhang
1
Sie sollten keine Methode in einer Vorlagenbindung aufrufen. [disabled]="!isValid"
Tom
3
Ahhaa ... wenn die Methode nur eine Variablenreferenz hat, ist sie in Ordnung. Wenn Sie eine komplexe Logik in einer Funktion haben, wird dies nicht bevorzugt. Sie haben isValid
Recht
39

Ich würde folgendes empfehlen.

<button [disabled]="isInvalid()">Submit</button>
Proximo
quelle
4
Ist es nicht besser, Funktionsaufrufe in HTML zu vermeiden, da sie bei jedem Tick / Zyklus aufgerufen werden?
John
5

Verwenden von ngClass Deaktivieren der Schaltfläche für ungültiges Formular ist in Angular2 keine gute Vorgehensweise, wenn integrierte Funktionen zum Aktivieren und Deaktivieren der Schaltfläche bereitgestellt werden, wenn das Formular gültig bzw. ungültig ist, ohne dass zusätzliche Anstrengungen / Logik erforderlich sind.

[disabled] Wenn das Formular gültig ist, wird es aktiviert und wenn das Formular ungültig ist, wird es automatisch deaktiviert.

Siehe Beispiel:

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

Locker
quelle
3

Möglicherweise kann der folgende Code helfen:

<button [attr.disabled]="!isValid ? true : null">Submit</button>
Shivang Gupta
quelle
Dies ist keine gute Lösung, da <button disabled="">oder <button disabled="false">wird in den meisten Browsern immer noch wie eine deaktivierte Schaltfläche behandelt
BillyTom
2

Ich habe versucht, deaktiviert zusammen mit Klickereignis zu verwenden. Unten ist das Snippet, die akzeptierte Antwort hat auch einwandfrei funktioniert. Ich füge diese Antwort hinzu, um ein Beispiel zu geben, wie sie mit deaktivierten und Klick-Eigenschaften verwendet werden kann.

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

Wenn Sie reaktive Formulare verwenden und einige mit einem Formularsteuerelement verknüpfte Eingaben deaktivieren möchten, sollten Sie diese disabledLogik in Ihren Code einfügen und yourFormControl.disable()oder aufrufenyourFormControl.enable()

Sergey P. aka azurblau
quelle
2

Ich denke, das ist der einfachste Weg

<!-- Submit Button-->
<button 
  mat-raised-button       
  color="primary"
  [disabled]="!f.valid"
>
  Submit
</button>
Gouk
quelle
1
 <button [disabled]="this.model.IsConnected() == false"
              [ngClass]="setStyles()"
              class="action-button action-button-selected button-send"
              (click)= "this.Send()">
          SEND
        </button>

.ts Code

setStyles() 
{
    let styles = {

    'action-button-disabled': this.model.IsConnected() == false  
  };
  return styles;
}
Amir Touitou
quelle