angular2'de ng-engelli için herhangi bir alternatif var mı?

150

Geliştirme için angular2 kullanıyorum ve angular2 için herhangi bir alternatif olup olmadığını merak ediyordum ng-disabled.

Örn. aşağıdaki kod açısal JS'de:

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

Bu işlevi nasıl elde edebilirim? herhangi bir girdi?

angular angular-directive

— Bhushan Gadekar
kaynak

15

[devre dışı] = "! nextLibAvailable" bunu deneyin yardımcı olabilir

— mayur

286

Ayarlamak için disabledözelliğini trueveya falsekullanım

<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
kaynak

5

Sadece <button>,makul olan (bu doğru mu?) Üzerinde çalışır . Aksi takdirde hata mesajını alın (yani <a>bir 'a' 'nın bilinen bir özelliği olmadığı için' devre dışı bırakılamaz 'a bağlanılamıyor

— The Red Pea

4

Bir disabledözelliği olan her öğe üzerinde çalışır . Ayrıca bkz. Stackoverflow.com/questions/35431188/angular

— Günter Zöchbauer

71

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

nullHtml öğesinden attr kaldırmak için kullanmanız gerekir.

— Roger Gusmao
kaynak

3

Açısal> 2.x için bu, [attr.disabled] kullanımının doğru yoludur

— dale

13

attr.yalnızca öğenin bir disabledözelliği olmadığında gereklidir . Düğmeler ve giriş öğeleri gibi öğeler attr.için gereksizdir. disabledÖzelliği olmayan elemanlar için attr.disabled, devre dışı görünmesi için CSS ile hitap ederseniz anlamlıdır (fare işaretçisi, gri renkler, ...)

— Günter Zöchbauer

Evet, bazı öğelerin özellik varsayılanını devre dışı bırakmadığı durumlarda bu en iyi yoldur.

— Viraj

Burada bir çözüm görebilirsiniz - bileşenlerin HTML'sinde bu öznitelikle çalışır [attr.aria-disabled]="myPropReflectingIfDisabled". Bu bir özellik katacak aria-disabled="true"eğer myPropReflectingIfDisabledolduğunu true.

— Netsi1964

7

İşte anular 6 ile kullandığım bir çözüm.

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

artı yukarıda verilen cevap

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

benim için işe yaramadı artı boş kullanmanın farkında olun çünkü bool bekliyor.

— Aneeq Azam Khan
kaynak

[readonly] = "DateRelatedObject.bool_DatesEdit? true: false" Angular 6+ ile çalışır

— somedev

4

Açısal 4+ sürümler için deneyebilirsiniz

<input [readonly]="true" type="date" name="date" />

— Krishnadas PC
kaynak

0

Evet Ya [devre dışı] = "true" ayarlayabilir ya da bir radyo düğmesi veya onay kutusu ise, devre dışı bırak seçeneğini kullanabilirsiniz.

Radyo düğmesi için:

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

Açılır menü için:

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

— Priya Gupta
kaynak