html右键angular,html - Angular2禁用按钮

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

是的你可以

(click)="toggle(!isOn)">

Click me!

[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