czy jest jakaś alternatywa dla ng-disabled w angular2?

145

Używam angular2 do programowania i zastanawiałem się, czy jest jakaś alternatywa dla ng-disabledangular2.

Na przykład. poniższy kod jest w angularJS:

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

Chciałem tylko wiedzieć, jak mogę osiągnąć tę funkcjonalność? jakieś dane wejściowe?

angular angular-directive

— Bhushan Gadekar
źródło

15

[disabled] = "! nextLibAvailable" spróbuj, to może pomóc

— 2016

278

Aby ustawić disabledwłaściwość na truelub falseużyj

<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
źródło

5

Działa tylko na <button>,(czy to prawda?), Co jest rozsądne. W przeciwnym razie pojawi się komunikat o błędzie (np. Podczas próby powiązania z <a>) `` Nie można powiązać z 'wyłączonym' ', ponieważ nie jest to znana właściwość `` a' '

— The Red Pea

4

Działa na każdym elemencie, który ma disabledwłaściwość. Zobacz także stackoverflow.com/questions/35431188/angular

— Günter Zöchbauer

69

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

Musisz użyć, nullaby usunąć attr z elementu html.

— Roger Gusmao
źródło

3

Dla kątów> 2.x jest to poprawny sposób korzystania z [attr.disabled]

— dale

12

attr.jest wymagany tylko wtedy, gdy element nie ma disabledwłaściwości. W przypadku elementów takich jak przyciski i elementy wejściowe attr.jest zbędne. W przypadku elementów, które nie mają disabledwłaściwości, powiązanie attr.disabledma znaczenie tylko wtedy, gdy zaadresujesz je przez CSS, aby wyglądały jak wyłączone (wskaźnik myszy, szare kolory, ...)

— Günter Zöchbauer

Tak, jest to najlepszy sposób, gdy jakiś element nie ma wyłączonej domyślnej właściwości.

— Viraj,

Możesz zobaczyć rozwiązanie tutaj - działa z tym atrybutem w kodzie HTML komponentów [attr.aria-disabled]="myPropReflectingIfDisabled". Doda atrybut, aria-disabled="true"jeśli myPropReflectingIfDisabledjest true.

— Netsi1964

6

Oto rozwiązanie, którego używam z anular 6.

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

plus powyższa odpowiedź

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

nie działa dla mnie i pamiętaj o używaniu null, ponieważ oczekuje bool.

— Aneeq Azam Khan
źródło

[readonly] = "DateRelatedObject.bool_DatesEdit? true: false" działa z Angular 6+

— somedev

4

W przypadku wersji kątowych 4+ możesz spróbować

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

— Krishnadas PC
źródło

0

Tak Możesz ustawić [disabled] = "true" lub jeśli jest to przycisk radiowy lub pole wyboru, można po prostu użyć wyłączenia

W przypadku przycisku radiowego:

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

Lista rozwijana:

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

— Priya Gupta
źródło