通过在 Angular 6 中创建自定义指令来启用/禁用按钮答案

【问题标题】：Enable/ Disable a button by creating custom directive in angular 6通过在 Angular 6 中创建自定义指令来启用/禁用按钮
【发布时间】：2019-05-02 05:35:03
【问题描述】：

需要根据条件在多个 HTML 页面上动态启用/禁用多个按钮，即 Active = true 然后启用按钮，如果 Active = false 然后禁用按钮。如何创建和应用自定义指令。

【问题讨论】：

stackblitz.com/edit/angular-disable-directive

标签： angular html angular6 angular2-directives

【解决方案1】：

大概是这样的：

.ts

import { NgControl } from '@angular/forms';

@Directive({
  selector: '[disableControl]'
})
export class DisableControlDirective {

  @Input() set disableControl( condition : boolean ) {
    const action = condition ? 'disable' : 'enable';
    this.ngControl.control[action]();
  }

  constructor( private ngControl : NgControl ) {
  }

}

html:

<button [disableControl]="condition">Button 1</button>
<button [disableControl]="condition">Button 2</button>
<button [disableControl]="condition">Button 3</button>

condition 将是组件中的布尔值，在必要时会禁用/启用控制。

来源：https://netbasal.com/disabling-form-controls-when-working-with-reactive-forms-in-angular-549dd7b42110

【讨论】：

您的示例适用于所有控件，但 Rajesh 想要禁用多个按钮..您的代码可能是这样的...
` `