时间戳

首页 > 解决方案 > 初始化表单时未禁用Angular7按钮

angular - 初始化表单时未禁用Angular7按钮

问题描述

我正在尝试在未填写表单时禁用按钮。在 Chrome 和 FF 中一切正常，但在 IE11 中，该按钮仍处于启用状态。那是代码：

<div class="col-12">
     <app-button label="login.login" (click)="save()" [disabled]="(!f.dirty || f.invalid) ? 'disable' : null"></app-button>
     <div class="pt-3 text-right">
      <a [routerLink]="['/login']" class="pt-5">{{"login.changepassword" | translate}}</a>
    </div>
</div>

奇怪的是，如果我在通过浏览器检查器 (F12) 生成的 html 中进行最小的更改（例如，更改标签），它会完美运行。

标签： angularinternet-explorer-11

解决方案

尝试通过添加 @Input 装饰器来检测何时必须禁用按钮来遵循方法。

组件 app-button.component.ts

selector:['app-button'],
templeateUrl: ['./app-buton.component.html']
....
Class ButtonComponent {
  @Input isDisabled: booelan
}

组件 app-button.component.html

<button  [disabled]="isDisabled">

然后现在应用程序按钮组件的实现位置，您需要执行以下代码：

<app-button [isDisabled]="(!f.dirty || !f.valid)"> </app-button>

推荐阅读