javascript Angular 2中的禁用按钮

rfbsl7qr 于 2023-05-21 发布在 Java

关注(0)|答案(3)|浏览(106)

我想如果输入'合同类型'是空的，按钮'保存'是不可点击
保存按钮：

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

定义contractType：

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.',
                }
            ]
        };

绿色保存按钮：

JavaScript

来源：https://stackoverflow.com/questions/43978380/disable-button-in-angular-2

3条答案

按热度按时间

ulydmbyx1#

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

赞(0）回复(0）举报 2023-05-21

bprjcwpo2#

我试过使用[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

赞(0）回复(0）举报 2023-05-21

sczxawaw3#

这应该取决于您使用的表单验证类型。整个技巧是将disable属性绑定到表单输入错误。所以当输入没有错误的时候它就会被启用。

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

这里有一个angular step by step approach of disabling buttons based on different condition

赞(0）回复(0）举报 2023-05-21

我来回答

javascript Angular 2中的禁用按钮

3条答案

相关问题

热门标签

最新问答