angular2에서 ng-disabled에 대한 대안이 있습니까?

145

개발에 angular2를 사용하고 있으며 angular2에 대한 대안이 있는지 궁금합니다 ng-disabled.

예를 들어. 아래 코드는 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>

이 기능을 어떻게 달성 할 수 있습니까? 어떤 입력?

angular angular-directive

— 부샨가 데카르
소스

15

[disabled] = "! nextLibAvailable"도움이 될 수도 있습니다

— mayur

278

disabled속성을 설정 true하거나 false사용하려면

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

— 귄터 bau 바우어
소스

5

에 대해서만 작동합니다 <button>,(사실입니까?). 그렇지 않으면 <a>'a'의 알려진 속성이 아니기 때문에 'disabled'에 바인딩 할 수 없습니다 ' 라는 오류 메시지가 표시됩니다.

— The Red Pea

4

disabled속성 이있는 모든 요소에서 작동 합니다. 참조 stackoverflow.com/questions/35431188/angular

— 귄터 Zöchbauer에게

69

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

nullhtml 요소에서 attr을 제거하는 데 사용해야 합니다.

— 로저 구스마오
소스

3

각도> 2.x의 경우 [attr.disabled]를 사용하는 올바른 방법입니다.

— dale

12

attr.요소에 disabled속성 이없는 경우에만 필요 합니다. 버튼 및 입력 요소와 같은 요소 attr.는 중복됩니다. disabled속성 이없는 요소의 경우 바인딩을 사용하는 attr.disabled것은 CSS로 비활성화하여 비활성화 된 것처럼 보이게하는 경우에만 의미가 있습니다 (마우스 포인터, 회색 등)

— Günter Zöchbauer

예, 일부 요소가 속성 기본값을 비활성화하지 않은 경우 가장 좋은 방법입니다.

— Viraj

여기 에서 해결책을 볼 수 있습니다 [attr.aria-disabled]="myPropReflectingIfDisabled". 구성 요소 HTML에서이 속성과 함께 작동합니다 . is 인 aria-disabled="true"경우 속성을 추가합니다 . myPropReflectingIfDisabledtrue

— Netsi1964

6

다음은 anular 6과 함께 사용하는 솔루션입니다.

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

주어진 답변 이상

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

나를 위해 일하지 않았고 부울을 기대하는 null 원인을 사용하는 것을 알고 있어야합니다.

— 아 넥크 아잠 칸
소스

[읽기 전용] = "DateRelatedObject.bool_DatesEdit 사실 : 거짓?"각도와 작품 6 +

— somedev

4

각도 4 이상 버전의 경우 시도해 볼 수 있습니다

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

— 크리스나 다스 PC
소스

0

예 [disabled] = "true"를 설정하거나 라디오 버튼 또는 확인란 인 경우 disable을 사용할 수 있습니다.

라디오 버튼 :

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

드롭 다운 :

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

— 프리 야 굽타
소스