Gibt es eine Alternative für ng-deaktiviert in angle2?

145

Ich benutze angle2 für die Entwicklung und habe mich gefragt, ob es eine Alternative für gibt ng-disabled Angular2 gibt.

Zum Beispiel. Der folgende Code ist in angleJS:

<button ng-disabled="!nextLibAvailable" ng-click="showNext('library')" class=" btn btn-info btn-xs" title="Next Lib >> {{libraries.name}}">
    <i class="fa fa-chevron-right fa-fw"></i>
</button>

Ich wollte nur wissen, wie ich diese Funktionalität erreichen kann. irgendwelche Eingaben?

angular angular-directive Bhushan Gadekar
quelle
15
[disabled] = "! nextLibAvailable" versuchen Sie dies könnte helfen
Mayur

Antworten:

278

Zum Festlegen oder Verwenden der disabledEigenschafttruefalse

<button [disabled]="!nextLibAvailable" (click)="showNext('library')" class=" btn btn-info btn-xs" title="Next Lib"> {{libraries.name}}">
    <i class="fa fa-chevron-right fa-fw"></i>
</button>
Günter Zöchbauer
quelle
5
Funktioniert nur weiter <button>,(stimmt das?), Was vernünftig ist. Andernfalls erhalten Sie die Fehlermeldung (dh wenn Sie versuchen, an eine zu binden <a>): "Kann nicht an" deaktiviert "
The Red Pea
4
Es funktioniert für jedes Element, das eine disabledEigenschaft hat. Siehe auch stackoverflow.com/questions/35431188/angular
Günter Zöchbauer
69 
[attr.disabled]="valid == true ? true : null"

Sie müssen verwenden null, um attr aus dem HTML-Element zu entfernen.

Roger Gusmao
quelle
3
Für Winkel> 2.x ist dies der richtige Weg mit [attr.disabled]
Dale
12
attr.ist nur erforderlich, wenn das Element keine disabledEigenschaft hat. Für Elemente wie Schaltflächen und Eingabeelemente attr.ist redundant. Für Elemente, die keine disabledEigenschaft haben, ist eine Bindung an attr.disablednur dann sinnvoll, wenn Sie sie per CSS adressieren, damit sie deaktiviert aussieht (Mauszeiger, graue Farben, ...)
Günter Zöchbauer
Ja, dies ist der beste Weg, wenn für einige Elemente die Standardeinstellung für deaktivierte Eigenschaften nicht aktiviert ist.
Viraj
Sie können eine Lösung finden hier - es funktioniert mit diesem Attribut in Ihrer Komponenten HTML [attr.aria-disabled]="myPropReflectingIfDisabled". aria-disabled="true"Wenn dies der Fall myPropReflectingIfDisabledist, wird ein Attribut hinzugefügt true.
Netsi1964
6

Hier ist eine Lösung, die ich mit Anular 6 verwende.

[readonly]="DateRelatedObject.bool_DatesEdit ? true : false"

plus oben angegebene Antwort

[attr.disabled]="valid == true ? true : null"

hat bei mir nicht funktioniert und ich bin mir bewusst, dass ich null verwende, weil ich Bool erwarte.

Aneeq Azam Khan
quelle
[readonly] = "DateRelatedObject.bool_DatesEdit? true: false" funktioniert mit Angular 6+
irgendwann
4

Für eckige 4+ Versionen können Sie versuchen

<input [readonly]="true" type="date" name="date" />
Krishnadas PC
quelle
0

Ja Sie können entweder [disabled] = "true" setzen oder, wenn es sich um ein Optionsfeld oder ein Kontrollkästchen handelt, einfach disable verwenden

Für Optionsfeld:

<md-radio-button disabled>Select color</md-radio-button>

Für Dropdown:

<ng-select (selected)="someFunction($event)" [disabled]="true"></ng-select>
Priya Gupta
quelle