如何在 Angular 中禁用表单控件？

在本文中，我们将了解如何在 Angular 10 中禁用表单控件。我们将使用AbstractControl disabled 属性来禁用表单控件元素。

句法：

返回值：

• boolean：返回布尔值，说明元素是否被禁用。

方法：

• 创建要使用的 Angular 应用程序
• 在 app.component.html 中使用 ngForm 指令创建一个表单。
• 现在使用 AbstractControl disabled 属性禁用表单控件元素
• 使用 ng serve 为 Angular 应用程序提供服务以查看输出。

示例 1：在此示例中，我们使用此属性禁用了输入元素。

app.component.html

    Name: 

输出：

示例 2：在此示例中，我们使用此属性禁用了复选框元素。

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

    Checked: 

输出：

示例 3：在此示例中，我们使用此属性禁用了按钮元素。

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

app.component.html

    Disabled Button

输出：

参考： https://angular.io/api/forms/AbstractControlDirective#disabled