在Angular 2中禁用按钮有两个条件

在Angular 2中这是可能的吗?

<button type="submit" [disabled]="!validate && !SAForm.valid">Add</button>

我希望如果这两个条件都是真的,他们会启用按钮。

我已经尝试了上述代码,但没有达到预期效果。

解决办法

听起来你需要一个手术室来代替:

Add

这将在未验证或不符合SAForm.valid的情况下禁用该按钮。

评论(2)

在component.ts中声明一个变量并将其初始化为某个值

 buttonDisabled: boolean;

  ngOnInit() {
    this.buttonDisabled = false;
  }

现在,在.html或模板中,你可以放入以下代码:

 Click Me 

现在你可以通过改变buttonDisabled变量的值来启用/禁用按钮。

评论(2)

这在angular 2中可能吗?

是的,这是可能的。

如果两个条件都是真的,会不会启用这个按钮?

不会,如果它们都为真,那么按钮将被禁用。disabled="true"

我尝试了上述代码,但效果不佳

你期望什么?当valid为假时,按钮将被禁用,而且angular formGroupSAForm无效。

这里也有一个建议,请让按钮的类型为按钮而不是提交,因为这可能会导致整个表单提交,你需要使用invalidate并监听(ngSubmit)

评论(6)