Angular 2 ng-disabled の概念
Angular 2 ng-disabled は、開発者がフォーム コントロールを無効にできるディレクティブです。 ユーザーがフォーム フィールドにデータを入力できないようにするために使用したり、データが事前に入力されている入力フィールドを無効にするために使用したりできます。
この属性は、入力、ボタン、選択、およびテキスト領域要素を含む、任意の HTML 要素に追加できます。
ng-disabled ディレクティブは要素の外観を変更しませんが、ユーザーによる要素の操作を妨げます。 チェックボックスがオフのときに入力フィールドを無効にしたり、ユーザーがログインしていないときにボタンを無効にしたりするなど、さまざまなシナリオで適用できます。
Angular 2 ng-disabled ディレクティブを使用する手順
ng-disabled を使用する最も簡単な方法は、Component のクラスで disabled プロパティを true に設定することです。 これによりコンポーネントが無効になり、DOM でレンダリングされなくなります。
この記事では、Angular 2 ng-disabled を使用する手順について説明します。
-
モジュールをインポートする
app.module.tsファイルにng-disabledモジュールをインポートします。 -
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 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