I'm trying to keep a button disabled under two conditions. The first is if a required fields condition has been meet (is there isn't text in the input) the second is if the Boolean value is false. The problem is for some reason my directive seems to acting like an or rather than an And where the button becomes enabled after either one of the two conditions is meet.
Here is the button I'm trying to keep disabled when both conditions aren't met
<button type="button" id ='submission' class="btn btn-success ng-hide" ng-show="submissionReady" ng-hide="afterSubmission" ng-click="saveScenario()" ng-disabled="myForm.title.$invalid && !playerService.status">Save Scenario</button>
You want the button to be disabled if one of the conditions is true. Not if both conditions are true. So you need an OR, not an AND:
ng-disabled="myForm.title.$invalid || !playerService.status"
Related
Is it ok to write this?
<button href="#" ng-class="{'disabled' : form.mail.$invalid && form.firstName.$invalid }"></button>
I thought it was right, but it doesn't work. I have a form, and I need to disable the Send button if these conditions aren't ok.
If I write only one condition, it works.
You can simply use (, ) on your condition:
ng-class="{'disabled': (form.mail.$invalid && form.firstName.$invalid)}"
JSFiddle for demo
As a side note, as far as I know your code should works well.
You should pass the ng-disabled attribute to the button with the proper expression. Not seeing your code, something along the lines of:
<button ng-disabled="form.mail.$invalid && form.firstName.$invalid ">... </button>
Code:
<label class="checkbox-inline">
<input type="checkbox" name="activeFlag" id="active"
value="active" ng-checked="flag" ng-click="flag=!flag"/>
<span ng-show="flag">Yes</span><span ng-show="!flag">No</span>
<input ng-if="::flag" type="button" style="width:85px;" value="Active"
class="btn btn-success btn-xs"/>
<input ng-if="::!flag" type="button" style="width:85px;" value="Deactivated"
class="btn btn-danger btn-xs"/>
</label>
Here as you can see, i need to toggle "Yes" to "No" when checkbox is clicked, but I don't need to change my button value once it is fixed. I tried using ::falg , but it gives out "Active" only for any initial value of flag.
Suggest my error.
The double colon is using the One-time binding syntax so once it evaluates flag it doesn't watch it anymore. In this instance you'd want to remove the ::.
Also if you have any actions (like click events) on the buttons you're showing or hiding you'll need to re-bind them if you use ngif. If you use ngshow/nghide you won't. Here's a good summary of when to use which:
When to favor ng-if vs. ng-show/ng-hide?
Editing to add, if flag is always returning true when it's initially evaluated then you need to look at how you're setting your values initially as once it's set it won't be re-evaluated after the code is parsed because of the one-time binding.
Currently this is my ng-disable condition:
ng-disabled="registerForm.$invalid "
Basically if one or more inputs are empty, my button "submit" is disabled. Now I have an ID which needs to be validated first and if it is invalid, my button "submit" remains disabled. Im new to html5 btw.
Is there like a true and true = true?
This is my ID:
<input type="text" ng-blur ="register.validateid();" name="referalid" placeholder="Referal ID" ng-model="register.data.referalid" required="required" style="background-color:transparent; min-width:230px;"/>
<div class="helpers" ng-if="registerForm.referalid.$touched">
<span ng-if="registerForm.referalid.$error.required" class="help-block" style="color:red;">This field requires a VALID Referal ID!</span>
</div>
</span>
Just as with any other expression you can use multiple conditions separated with normal javascript operators like && or ||:
ng-disabled="registerForm.$invalid && someOtherCondition"
You can also provide function, it's still valid expression:
ng-disabled="isDisabled(registerForm)"
You can write conditions inline or create a function in a controller which checks all the validation conditions and returns true/false.
The code will look like:
ng-disabled="registerForm.$invalid && condition2"
Or
ng-disabled="validateForm()"
These attributes are both given either a true or false value, so what difference is there between them? It would make sense if there weren't values for them.
Am I missing something?
With ng-show the element is shown if the expression is true, it will hide if it is false
On the other hand with ng-hide the element is hidden if the expression is true and it will be shown if it is false.
Just two sides of the same coin.
On a project I was working on before, I found having the option of both ng-show and ng-hide useful. The reason being is because I had a link in my navbar that was only supposed to show if the user was on a specific view. Here is that scenario:
<li ng-hide="isActive('/about') || isActive('/contact')" ng-class="{ 'vert-nav-active': isActive('/investigator')}" class="top-buffer">
Investigator Portal
</li>
Now, you might say, well you could just make the isActive('/about') || isActive('/contact') return the opposite Boolean and change the ng-hide to ng-show and every thing will stay the same but as you can see I'm also using this function to determine which link I'm on. If I reverse this logic, it will look like I'm on every link except the actual link I'm on. Granted I could write another function for the ng-show but I like reusing code that's already there.
Also worth mentioning is ng-if which takes a boolean expression just like ng-show and ng-hide but rather than just showing/hiding the elements depending on the expression, it completely removed the element from the DOM if the expression is false and put the element back in the DOM if the expression becomes true
i have a good scenario, let say you want to show one attribute or another depending on a validation, but not both, so using both ng-show and ng-hide like this:
<div ng-show="validation"></div>
<div ng-hide="validation"></div>
if the validation is true it would show the first div, but if it is false it would show the second div...
this can be done in many more ways but is a cleaver solution for a tricky problem :D
ng-show will only display the element IF the expression is true...
<span ng-show="true">Will Show </span>
<span ng-show="false">Will not Show </span>
ng-hide will not display the element IF the expression is true, but will display if the expression is false.
<span ng-hide="true">Will not display</span>
<span ng-hide="false">Will display</span>
I have the following code
<div class="form-group" show-errors ng-show="contact.ContactType === 'LegallyMarriedSpouse' || contact.ContactType === 'Self'">
<label class="control-label">Social Security Number</label>
<input type="text" class="form-control" ng-model="contact.SSN" ui-mask="999-99-9999" name="SSN" maxlength="50" required />
</div>
I would have thought that Angular would have made sure that the hidden field was no longer required however that is not the case. although the user can't see it it's clearly still stopping the form from being submitted because I see the following error in the console.
An invalid form control with name='SSN' is not focusable.
So - the question is how do I handle this? If it's displayed I want it to be required if not obviously we can't try and force the user to fill out the values.
2 solutions:
use ng-if rather than ng-show to remove the input from the form rather than hiding it
instead of required, use ng-required="contact.ContactType === 'LegallyMarriedSpouse' || contact.ContactType === 'Self'" to make it required only when the condition showing the field is true. You should put that complex condition in a scope function though, to avoid duplicating it.
Note however that even if the form is invalid, it can still be submitted, unless you're explicitely preventing it by disabling its submit button when the form is invalid. I don't think the error you're seeing has anything to do with the form being invalid.
Also note that the second solution will only deal with the field being required. If the value inside the field is too long or doesn't match with the mask, the field will stay invalid. So you should probably use the first solution.