Concepto de Angular 2 ng-disabled

Muhammad Adil 20 marzo 2023

Angular Angular Directive

Angular 2 ng-disabled es una directiva que permite a los desarrolladores deshabilitar un control de formulario. Se puede usar para evitar que el usuario ingrese datos en un campo de formulario, o se puede usar para deshabilitar un campo de entrada que está precargado con datos.

Este atributo se puede agregar a cualquier elemento HTML, incluidos los elementos de entrada, botón, selección y área de texto.

La directiva ng-disabled no cambiará la apariencia del elemento, pero evitará la interacción del usuario con él. Se puede aplicar en varios escenarios, como deshabilitar un campo de entrada cuando una casilla de verificación no está marcada o deshabilitar un botón cuando el usuario no ha iniciado sesión.

Pasos para usar la directiva `ng-disabled` de Angular 2

La forma más sencilla de usar ng-disabled es establecer la propiedad disabled en true en la clase Component. Esto deshabilitará el componente y no se representará en el DOM.

Este artículo lo guiará a través de los pasos para usar Angular 2 ng-disabled.

Importar el módulo

Importe el módulo ng-disabled en su archivo app.module.ts.

Agregue el código 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');
  }
}

Deshabilitar componentes en la lógica de su aplicación

Deshabilite los componentes en la lógica de su aplicación agregando ng-disabled como parámetro de entrada y configurándolo en true, así:
```
<h2>Example of Angular 2 ng-disabled</h2>
<div
	 (click)="onBlockClick()">
  <button [disabled]="true"
		  (click)="onClick()">
	Home
  </button>
</div>
```
Aquí deshabilitamos el botón Home. Puede ver el botón, pero no puede interactuar con él.

Así es como funciona ng-disabled en Angular 2.

Haga clic aquí para ver la demostración en vivo del código como se mencionó anteriormente.

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

Pasos para usar la directiva ng-disabled de Angular 2

Importar el módulo

Agregue el código TypeScript

Deshabilitar componentes en la lógica de su aplicación

Artículo relacionado - Angular Directive

Pasos para usar la directiva `ng-disabled` de Angular 2