在我的应用中,我最初禁用了一个按钮。如果填充了输入字段,则启用该按钮但存在奇怪的行为。如果禁用,则禁止图标并且它是不可点击的(这显然是正确的)。在输入字段中的数字上,按钮会更改类并启用,但图标不会更改,但可以单击按钮(这很奇怪)。如果单击输入字段,图标将更改,手形图标可见而不是禁止信号。预期的行为是在输入字段中的数字上立即显示手形图标, 这是我的代码:
<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";
}
}
有什么建议吗?
答案 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(){
}
}
拖板: