在角度2中禁用具有两个条件的按钮

时间:2017-04-21 05:05:38

标签: html angular typescript

这可能是角2吗?

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

我希望如果两个条件都成立,他们将启用按钮。

我已经尝试了上面的代码,但它没有按预期工作。

5 个答案:

答案 0 :(得分:58)

听起来你需要一个OR代替:

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

如果不验证或者不是SAForm.valid,则会禁用该按钮。

答案 1 :(得分:4)

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

 buttonDisabled: boolean;

  ngOnInit() {
    this.buttonDisabled = false;
  }

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

<button disabled="{{buttonDisabled}}"> Click Me </button>

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

答案 2 :(得分:1)

除了其他答案,我想指出的是,这种推理也称为 De Morgan's law 。实际上,与编程有关的更多的是数学,但是它是如此基础,每个程序员都应该了解。

您的问题是这样开始的:

enabled  = A and B
disabled = not ( A and B )

到目前为止,还不错,但是您又走了一步,尝试去掉括号。 这有点棘手,因为您必须用and / &&替换or / ||

not ( A and B ) = not(A) OR not(B)

或更数学的表示法:

enter image description here

每当我简化条件或处理概率时,我都会牢记这一定律。

答案 3 :(得分:0)

可以像下面那样使用三元运算符。[disabled]内部需要对它的操作为true或false。

<button type="button" 
  [disabled]="(testVariable1 != 0 || testVariable2!=0)? true:false"
  mat-button>Button</button>

答案 4 :(得分:-1)

  

这可能是角2吗?

是的,这是可能的。

  

如果两个条件都为真,他们会启用按钮吗?

不,如果它们是真的,那么该按钮将被禁用。 disabled="true"

  

我尝试上面的代码,但效果不好

你期待什么?如果valid为false且角度formGroupSAForm无效,则该按钮将被停用。

此处也有推荐,请将按钮类型按钮设为提交,因为这可能导致整个表单提交,您需要使用invalidate并收听(ngSubmit)