web-dev-qa-db-de.com

Angular2-Deaktivierungstaste

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

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

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

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

Vielen Dank.

htmlangularangular2-templateangular2-forms
102
Nir Schwartz

Update

Ich frage mich. Warum möchten Sie nicht die [disabled] -Attributbindung verwenden, die von Angular 2 bereitgestellt wird? Es ist der richtige Weg, mit dieser Situation umzugehen. Ich schlage vor, Sie verschieben Ihre isValid Prüfung über die Komponentenmethode.

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

Das Problem mit dem, was du ausprobiert hast, wird unten erklärt

Grundsätzlich können Sie hier ngClass 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 Ereigniscode click wie folgt ändern. Damit onConfirm nur ausgelöst wird, wenn das Feld gültig ist.

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

Demo hier

153
Pankaj Parkar

Ich würde folgendes empfehlen.

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

Ja, du kannst

<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

7
Sasikumar D.R.

Wenn Sie ein Formular haben, ist auch Folgendes möglich:

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

Demo hier: http://plnkr.co/edit/Xm2dCwqB9p6WygrquUGh?p=preview&open=app%2Fapp.component.ts

6
Raptor

Die Verwendung von ngClass zum Deaktivieren der Schaltfläche für ungültige Formulare ist in Angular2 keine bewährte Methode, wenn die eingebauten Funktionen zum Aktivieren und Deaktivieren der Schaltfläche für gültige und ungültige Formulare ohne zusätzlichen Aufwand bzw. zusätzliche Logik bereitgestellt werden.

[disabled] macht alles wie 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="">
5
Slack

Möglicherweise kann der folgende Code helfen:

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

Ich habe versucht, deaktiviert zusammen mit Klick-Ereignis 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 klickenden Eigenschaften verwendet werden kann.

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

Ich denke, das ist der einfachste Weg

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

Wenn Sie reaktive Formulare verwenden und Eingaben in Verbindung mit einem Formularsteuerelement deaktivieren möchten, sollten Sie diese disabled -Logik in Ihren Code einfügen und yourFormControl.disable() oder yourFormControl.enable() aufrufen.

2
Sergey P. aka azure
 <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;
}
1
Amir Twito