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

时间:2018-03-14 16:17:26

标签: angular event-binding

在我的应用中,我最初禁用了一个按钮。如果填充了输入字段,则启用该按钮但存在奇怪的行为。如果禁用,则禁止图标并且它是不可点击的(这显然是正确的)。在输入字段中的数字上,按钮会更改类并启用,但图标不会更改,但可以单击按钮(这很奇怪)。如果单击输入字段,图标将更改,手形图标可见而不是禁止信号。预期的行为是在输入字段中的数字上立即显示手形图标, 这是我的代码:

<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";
        }
    }

有什么建议吗?

1 个答案:

答案 0 :(得分:1)

以下是适合您应用的解决方案:

最好使用[ngClass]而不仅仅是[class]。并尝试避免HTML中的返回状态,因为您的方法将在一个循环中工作。

我添加了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