apakah ada alternatif untuk ng-disable di angular2?

145

Saya menggunakan angular2 untuk pengembangan dan bertanya-tanya apakah ada alternatif untuk ng-disableddi angular2.

Misalnya kode di bawah ini dalam 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>

Hanya ingin tahu. Bagaimana cara mencapai fungsi ini? ada masukan?

angular angular-directive Bhushan Gadekar
sumber
15
[dinonaktifkan] = "! nextLibAvailable" coba ini mungkin membantu
mayur

Jawaban:

278

Untuk mengatur atau menggunakan disabledpropertitruefalse

<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
sumber
5
Hanya bekerja pada <button>,(apakah itu benar?), Yang masuk akal. Lain mendapatkan pesan kesalahan (yaitu ketika mencoba untuk mengikat ke <a>) `Tidak dapat mengikat 'dinonaktifkan' karena itu bukan properti yang dikenal dari 'a'`
The Red Pea
4
Ia bekerja pada setiap elemen yang memiliki disabledproperti. Lihat juga stackoverflow.com/questions/35431188/angular
Günter Zöchbauer
69 
[attr.disabled]="valid == true ? true : null"

Anda harus menggunakan nulluntuk menghapus attr dari elemen html.

Roger Gusmao
sumber
3
Untuk sudut> 2.x ini adalah cara yang benar menggunakan [attr.disabled]
dale
12
attr.hanya diperlukan ketika elemen tidak memiliki disabledproperti. Untuk elemen seperti tombol dan elemen input attr.berlebihan. Untuk elemen yang tidak memiliki disabledproperti, pengikatan attr.disabledhanya bermakna jika Anda mengatasinya dengan CSS agar terlihat seperti dinonaktifkan (penunjuk mouse, warna abu-abu, ...)
Günter Zöchbauer
Ya, ini adalah cara terbaik ketika beberapa elemen tidak menonaktifkan properti bawaan.
Viraj
Anda dapat melihat solusinya di sini - ini berfungsi dengan atribut ini di HTML komponen Anda [attr.aria-disabled]="myPropReflectingIfDisabled". Ini akan menambahkan atribut aria-disabled="true"jika myPropReflectingIfDisabledada true.
Netsi1964
6

Berikut adalah solusi yang saya gunakan dengan anular 6.

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

ditambah jawaban yang diberikan di atas

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

tidak bekerja untuk saya dan sadar akan menggunakan null karena mengharapkan bool.

Aneeq Azam Khan
sumber
[readonly] = "DateRelatedObject.bool_DatesEdit? true: false" bekerja dengan Angular 6+
somedev
4

Untuk versi 4+ sudut dapat Anda coba

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

Ya Anda dapat mengatur [dinonaktifkan] = "benar" atau jika itu adalah tombol radio atau kotak centang maka Anda dapat menggunakan menonaktifkan

Untuk tombol radio:

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

Untuk dropdown:

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