我知道在angular2中,我可以禁用具有[disable]
属性的按钮
,例如:
<button [disabled]="!isValid" (click)="onConfirm()">Confirm</button>
但是我可以使用[ngClass]
或做[ngStyle]
吗?像这样:
<button [ngStyle]="{disabled : !isValid}" (click)="onConfirm()">Confirm</button>
谢谢。
我知道在angular2中,我可以禁用具有[disable]
属性的按钮
,例如:
<button [disabled]="!isValid" (click)="onConfirm()">Confirm</button>
但是我可以使用[ngClass]
或做[ngStyle]
吗?像这样:
<button [ngStyle]="{disabled : !isValid}" (click)="onConfirm()">Confirm</button>
谢谢。
Answers:
我在想。您为什么不想使用[disabled]
Angular 2提供的属性绑定?这是处理这种情况的正确方法。我建议您isValid
通过组件方法移动支票。
<button [disabled]="! isValid" (click)="onConfirm()">Confirm</button>
基本上,您可以ngClass
在这里使用。但是添加类不会限制事件的触发。为了在有效输入上触发事件,您应该将click
事件代码更改为以下内容。因此,onConfirm
只有在字段有效时才会触发该事件。
<button [ngClass]="{disabled : !isValid}" (click)="isValid && onConfirm()">Confirm</button>
button[disabled]
选择器的&禁用事件将限制click
事件在按钮上启动..在ngClass
类中,您需要自己处理它,如我所示以上答案..
[disabled]="!isValid"
isValid
在用户界面上调用flag
是的你可以
<div class="button" [ngClass]="{active: isOn, disabled: isDisabled}"
(click)="toggle(!isOn)">
Click me!
</div>
https://angular.io/docs/ts/latest/api/common/NgClass-directive.html
如果您有表格,则还可以进行以下操作:
<form #f="ngForm">
<input name="myfield" type="text" minlenght="3" required ngModel>
<button type="submit" [disabled]="!f.valid">Submit</button>
</form>
此处演示:http : //plnkr.co/edit/Xm2dCwqB9p6WygrquUGh?p=preview&open=app%2Fapp.component.ts
ngClass
在Angular2中使用禁用按钮来禁用无效表单不是一个好习惯,因为Angular2提供了内置的功能来分别启用和禁用按钮(如果表单有效和无效),而无需进行任何额外的努力/逻辑。
[disabled]
将执行所有操作,例如,如果表单有效,则将启用它;如果表单无效,则将自动禁用它。
参见示例:
<form (ngSubmit)="f.form.valid" #f="ngForm" novalidate>
<input type="text" placeholder="Name" [(ngModel)]="txtName" name="txtname" #textname="ngModel" required>
<input type="button" class="mdl-button" [disabled]="!f.form.valid" (click)="onSave()" name="">
可能下面的代码可以帮助您:
<button [attr.disabled]="!isValid ? true : null">Submit</button>
<button disabled="">
或<button disabled="false">
在大多数浏览器如被禁用按钮仍然处理
如果您使用反应式表单,并且想禁用与表单控件相关的某些输入,则应将此disabled
逻辑放入代码中,然后调用yourFormControl.disable()
或yourFormControl.enable()
<button [disabled]="this.model.IsConnected() == false"
[ngClass]="setStyles()"
class="action-button action-button-selected button-send"
(click)= "this.Send()">
SEND
</button>
.ts代码
setStyles()
{
let styles = {
'action-button-disabled': this.model.IsConnected() == false
};
return styles;
}