En este artículo, vamos a ver cómo deshabilitar un control de formulario en Angular 10. Usaremos la propiedad deshabilitada AbstractControl para deshabilitar un elemento de control de formulario.
Sintaxis:
<formelement disabled></formelement>
Valor devuelto:
- booleano: devuelve booleano indicando si el elemento está deshabilitado o no.
Acercarse:
- Cree la aplicación Angular que se utilizará
- En app.component.html crea un formulario usando la directiva ngForm.
- Ahora deshabilite el elemento de control de formulario usando la propiedad deshabilitada AbstractControl
- Sirva la aplicación angular usando ng serve para ver el resultado.
Ejemplo 1: en este ejemplo, hemos deshabilitado el elemento de entrada usando esta propiedad.
app.module.ts
import { NgModule } from '@angular/core';
// Importing forms module
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
@NgModule({
bootstrap: [
AppComponent
],
declarations: [
AppComponent
],
imports: [
FormsModule,
BrowserModule,
BrowserAnimationsModule,
]
})
export class AppModule { }
app.component.html
<br> <form #gfg = "ngForm"> Name: <input type="text" name = 'name' ngModel disabled> </form>
Producción:
Ejemplo 2: en este ejemplo, hemos deshabilitado el elemento de casilla de verificación usando esta propiedad.
app.module.ts
import { NgModule } from '@angular/core';
// Importing forms module
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
@NgModule({
bootstrap: [
AppComponent
],
declarations: [
AppComponent
],
imports: [
FormsModule,
BrowserModule,
BrowserAnimationsModule,
]
})
export class AppModule { }
app.component.html
<br> <form #gfg = "ngForm"> Checked: <input type="checkbox" name = 'Check' ngModel disabled> </form>
Producción:
Ejemplo 3: en este ejemplo, hemos deshabilitado el elemento de botón usando esta propiedad.
app.module.ts
import { NgModule } from '@angular/core';
// Importing forms module
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
@NgModule({
bootstrap: [
AppComponent
],
declarations: [
AppComponent
],
imports: [
FormsModule,
BrowserModule,
BrowserAnimationsModule,
]
})
export class AppModule { }
- aplicación.componente.html
app.component.html
<br> <form #gfg = "ngForm"> <button disabled>Disabled Button</button> </form>
Producción:
Referencia: https://angular.io/api/forms/AbstractControlDirective#disabled