Html 在两个条件下禁用角度 2 中的按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43534347/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable button in angular 2 with two conditions
提问by MariaJen
Is this possible in angular 2?
这在角度 2 中可能吗？
<button type="submit" [disabled]="!validate && !SAForm.valid">Add</button>
I expect that if both of the conditions are true they will enable the button.
我希望如果这两个条件都为真，他们将启用按钮。
I've already tried the above code but it's not working as expected.
我已经尝试过上面的代码，但没有按预期工作。
回答by DeborahK
It sounds like you need an OR instead:
听起来你需要一个 OR 来代替：
<button type="submit" [disabled]="!validate || !SAForm.valid">Add</button>
This will disable the button if not validate or if not SAForm.valid.
如果未验证或不是 SAForm.valid，这将禁用该按钮。
回答by bvdb
In addition to the other answer, I would like to point out that this reasoning is also known as the De Morgan's law. It's actually more about mathematics than programming, but it is so fundamental that every programmer should know about it.
除了对方的回答，我想指出的是，这种推理也被称为了德·摩根定律。它实际上更多地是关于数学而不是编程，但它是如此基础，以至于每个程序员都应该了解它。
Your problem started like this:
你的问题是这样开始的：
enabled = A and B
disabled = not ( A and B )
So far so good, but you went one step further and tried to remove the braces.
And that's a little tricky, because you have to replace the and/&&with an or/||.
到目前为止一切顺利，但你更进一步，试图取下牙套。这是一个有点棘手，因为你必须更换and/&&与or/ ||。
not ( A and B ) = not(A) OR not(B)
Or in a more mathematical notation:
或者用更数学的表示法：
I always keep this law in mind whenever I simplify conditions or work with probabilities.
每当我简化条件或处理概率时，我总是牢记这条定律。
回答by Vishal Hulawale
Declare a variable in component.ts and initialize it to some value
在 component.ts 中声明一个变量并将其初始化为某个值
buttonDisabled: boolean;
ngOnInit() {
this.buttonDisabled = false;
}
Now in .html or in the template, you can put following code:
现在在 .html 或模板中，您可以输入以下代码：
<button disabled="{{buttonDisabled}}"> Click Me </button>
Now you can enable/disable button by changing value of buttonDisabledvariable.
现在您可以通过更改buttonDisabled变量的值来启用/禁用按钮。
回答by Amr ElAdawy
Is this possible in angular 2?
这在角度 2 中可能吗？
Yes, it is possible.
对的，这是可能的。
If both of the conditions are true, will they enable the button?
如果这两个条件都为真，他们会启用按钮吗？
No, if they are true, then the button will be disabled. disabled="true".
不，如果它们是真的，那么按钮将被禁用。disabled="true".
I try the above code but it's not working well
我尝试了上面的代码，但效果不佳
What did you expect? the button will be disabled when validis false and the angular formGroup, SAFormis not valid.
你期待什么？当按钮将被禁用valid为假并且角formGroup，SAForm是无效的。
A recommendation here as well, Please make the button of type button not a submit because this may cause the whole form to submit and you would need to use invalidateand listen to (ngSubmit).
这里也有一个建议，请使按钮类型的按钮不是提交，因为这可能会导致整个表单提交，您需要使用invalidate和收听(ngSubmit).
回答by Sarjerao Ghadage
Using the ternary operator is possible like following.[disabled] internally required true or false for its operation.
使用三元运算符是可能的，如下所示。[disabled] 内部需要对其操作进行 true 或 false。
<button type="button"
[disabled]="(testVariable1 != 0 || testVariable2!=0)? true:false"
mat-button>Button</button>
