html - Angular2禁用按钮
我知道在angular2中我可以禁用一个按钮[ngStyle]属性,例如:
Confirm
但是我可以使用[ngStyle]或[ngStyle]吗? 像这样:
Confirm
谢谢。
10个解决方案
144 votes
更新
我很纳闷。 为什么不想使用Angular 2提供的ngClass属性绑定? 这是处理这种情况的正确方法。 我建议您通过组件方法移动您的click检查。
Confirm
您尝试过的问题如下所述
基本上你可以在这里使用ngClass。 但是添加类不会限制事件被触发。 要在有效输入上启动事件,您应将click事件代码更改为以下。 因此只有在字段有效时才会触发onConfirm。
Confirm
在这里演示
Pankaj Parkar answered 2019-08-10T06:29:22Z
39 votes
我会推荐以下内容。
Submit
Proximo answered 2019-08-10T06:29:49Z
7 votes
是的你可以
[https://angular.io/docs/ts/latest/api/common/NgClass-directive.html]
Sasikumar D.R. answered 2019-08-10T06:30:17Z
6 votes
如果您有表格,那么以下内容也是可能的:
Submit
在这里演示:[http://plnkr.co/edit/Xm2dCwqB9p6WygrquUGh?p=preview&open=app%2Fapp.component.ts]
Raptor answered 2019-08-10T06:30:50Z
5 votes
使用[disabled]禁用无效表单的按钮在Angular2中不是一个好习惯,当它提供内置功能来启用和禁用按钮时,如果表单有效且无效,则不需要做任何额外的努力/逻辑。
[disabled]将完成所有的事情,如果表单有效,那么它将被启用,如果表单无效,那么它将被自动禁用。
见例子:
Slack answered 2019-08-10T06:31:31Z
3 votes
可能是下面的代码可以帮助:
Submit
Shivang Gupta answered 2019-08-10T06:31:52Z
2 votes
我尝试使用禁用以及点击事件。 下面是片段,接受的答案也完美无缺,我正在添加这个答案,举例说明它如何与禁用和点击属性一起使用。
pritesh agrawal answered 2019-08-10T06:32:20Z
2 votes
如果您正在使用被动表单并想要禁用与表单控件关联的某些输入,则应将此disabled逻辑放入代码中并调用yourFormControl.disable()或yourFormControl.enable()
Sergey P. aka azure answered 2019-08-10T06:32:49Z
2 votes
我认为这是最简单的方法
mat-raised-button
color="primary"
[disabled]="!f.valid"
>
Submit
Gouk answered 2019-08-10T06:33:16Z
1 votes
[ngClass]="setStyles()"
class="action-button action-button-selected button-send"
(click)= "this.Send()">
SEND
.ts代码
setStyles()
{
let styles = {
'action-button-disabled': this.model.IsConnected() == false
};
return styles;
}
Amir Twito answered 2019-08-10T06:33:43Z