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

Question

这可能是角2吗？

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

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

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

Answer 1

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

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

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

Answer 2

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

 buttonDisabled: boolean;

  ngOnInit() {
    this.buttonDisabled = false;
  }

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

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

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

Answer 3

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

您的问题是这样开始的：

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

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

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

或更数学的表示法：

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

Answer 4

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

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

Answer 5

  

这可能是角2吗？

是的，这是可能的。

  

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

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

  

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

你期待什么？如果valid为false且角度formGroup，SAForm无效，则该按钮将被停用。

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