Angular 2 - 禁用按钮的意外行为

Question

在我的应用程序中，我最初禁用了一个按钮。如果输入字段已填充，则按钮已启用，但会出现奇怪的行为。如果禁用，则该图标被禁止并且不可点击（这显然是正确的）。在输入字段中的数字上，按钮更改 class 并启用但图标没有更改，尽管可以单击按钮（这很奇怪）。如果我单击输入字段，图标会发生变化并且手形图标可见，而不是禁止信号。预期的行为是在输入字段中的某个数字上立即显示手形图标，这是我的代码：

<button (click)='onClick()' [disabled]="isDisabled" [class]="checkValid()" type="submit">Search</button>

checkValid() {
   if (this.myInput != "") {
            this.isDisabled= false;
            return "btn btn-primary";
        } else {
            this.isDisabled= true;
            return "btn btn-primary disabled";
        }
    }

有什么建议吗？

Answer 1

以下是适用于您的应用程序的解决方案：

最好使用 [ngClass] 而不是 [class]。并且尽量避免在HTML中出现return状态，因为你的方法会循环工作。

我添加了 ngClass 语句并在输入字段中添加了 (keyup)='checkValid()'。

@Component({
  selector: 'my-app',
  template: `
    <input type="text" [(ngModel)]="myInput" (keyup)='checkValid()'>
    <button (click)='onClick()' [disabled]="isDisabled" class='btn btn-primary' [ngClass]="{'disabled': isDisabled}" type="submit">Search</button>
  `,
})
export class App {
  isDisabled: boolean = true;
  myInput: string = '';

  constructor() {
  }

  checkValid() {
   if (this.myInput != "") this.isDisabled= false;
   else this.isDisabled= true;
  }

  onClick(){

  }
}

普兰克：

https://plnkr.co/edit/nWQiCy2ZVuZTPSVCBr4y?p=preview

Angular 2 - 禁用按钮的意外行为

Angular 2 - unexpected behaviour on button disabled

event-binding

angular