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

Odpowiedzi:

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