Angular 2 ng-disabled의 개념

Muhammad Adil 2023년3월20일

Angular Angular Directive

Angular 2 ng-disabled는 개발자가 양식 컨트롤을 비활성화할 수 있도록 하는 지시어입니다. 사용자가 양식 필드에 데이터를 입력하지 못하도록 하거나 데이터로 미리 채워진 입력 필드를 비활성화하는 데 사용할 수 있습니다.

이 속성은 입력, 버튼, 선택 및 텍스트 영역 요소를 포함한 모든 HTML 요소에 추가할 수 있습니다.

ng-disabled 지시문은 요소의 모양을 변경하지 않지만 사용자 상호 작용을 방지합니다. 체크박스를 체크하지 않았을 때 입력란을 비활성화하거나 사용자가 로그인하지 않았을 때 버튼을 비활성화하는 등 다양한 시나리오에 적용할 수 있습니다.

Angular 2 `ng-disabled` 지시문을 사용하는 단계

ng-disabled를 사용하는 가장 간단한 방법은 Component 클래스에서 disabled 속성을 true로 설정하는 것입니다. 이렇게 하면 구성 요소가 비활성화되고 DOM에서 렌더링되지 않습니다.

이 기사에서는 Angular 2 ng-disabled를 사용하는 단계를 안내합니다.

모듈 가져오기

ng-disabled 모듈을 app.module.ts 파일로 가져옵니다.

TypeScript 코드 추가

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  public onClick(): void {
	console.log('> click');
  }

  public onBlockClick(): void {
	console.log('> stopped');
  }
}

애플리케이션 논리에서 구성 요소 비활성화

다음과 같이 ng-disabled를 입력 매개변수로 추가하고 true로 설정하여 애플리케이션 로직의 구성 요소를 비활성화합니다.
```
<h2>Example of Angular 2 ng-disabled</h2>
<div
	 (click)="onBlockClick()">
  <button [disabled]="true"
		  (click)="onClick()">
	Home
  </button>
</div>
```
여기에서 Home 버튼을 비활성화했습니다. 버튼을 볼 수 있지만 상호 작용할 수는 없습니다.

이것이 Angular 2에서 ng-disabled가 작동하는 방식입니다.

위에서 언급한 코드의 라이브 데모를 확인하려면 여기를 클릭하십시오.

작가: Muhammad Adil

Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.

Facebook

Angular 2 ng-disabled 지시문을 사용하는 단계

모듈 가져오기

TypeScript 코드 추가

애플리케이션 논리에서 구성 요소 비활성화

관련 문장 - Angular Directive

Angular 2 `ng-disabled` 지시문을 사용하는 단계