Angular 2中的禁用按钮答案

【问题标题】：Angular 2中的禁用按钮
【发布时间】：2017-10-14 04:09:06
【问题描述】：

如果输入“合同类型”为空，则“保存”按钮不可点击

保存按钮：

<div class="col-md-4">
        <cic-textbox [control]="formGroup.get('contractType')"></cic-textbox>
      </div>

所有按钮：

 <div class="cic-header-actions pull-left" *ngIf="actions && actions.length > 
 0">
      <button class="btn btn-{{action.style}} m-l-xs" *ngFor="let action of actions" ng-disabled="!contractTypeValid" (click)="execute(action)">
          <cic-icon [icon]="action.icon"></cic-icon>
          {{action.text }}
        </button>
    </div>

定义合约类型：

 let contractType: DataDictionaryPropertyExtended = {
            Binding: 'VART:BEZEICHNUNG',
            Label: 'Vertragsart',
            LabelCols: 4,
            ContentCols: 8,
            IsDisabled: this.isDisabled,
            ValidationProperties: [
                <ValidationProperty>{
                    Type: ValidationType.IsNotEmpty,
                    ErrorMessage: 'Vertragsart darf nicht leer sein.',
                }
            ]
        };

按钮保存绿色：

【问题讨论】：

我在理解应该禁用哪个按钮时遇到了一些问题。我会像下面的罗宾一样回答这个问题，那么这个答案有什么问题？您能否创建一个 plunker，现在我们只能看到一些代码片段，至少我无法重新创建和理解所提供代码的问题......

标签： javascript angular button input components

【解决方案1】：

将ng-disabled="!contractTypeValid" 更改为[disabled]="!contractTypeValid"

【讨论】：

现在两者都不可点击。与输入的绑定仍然不存在
两者都不可点击，因为您使用*ngFor 呈现按钮，您需要从您的操作对象中获取禁用状态。您可以添加一些代码来确定操作是提交还是取消操作，并将操作对象的 isDisabled 属性设置为 true 或 false。

【解决方案2】：

我尝试使用[disabled]="!editmode"，但在我的情况下不起作用。

这是我的解决方案[disabled]="!editmode ? 'disabled': null"，我为谁担心。

<button [disabled]="!editmode ? 'disabled': null" 
    (click)='loadChart()'>
            <div class="btn-primary">Load Chart</div>
    </button>

Stackbliz https://stackblitz.com/edit/angular-af55ep

【讨论】：