Is there a way to put a condition inside an ng-click? Here, I want that the form is not submitted if there are any form errors, but then I got a parse exception.
<input ng-click="{{if(profileForm.$valid) updateMyProfile()}}" name="submit" id="submit" value="Save" class="submit" type="submit">
I tried to use ng-disabled but then my validation plugin does not work cause form is never submitted at all, so it is not triggered.
This question is related to
javascript
angularjs
Template:
<input ng-click="check(profileForm.$valid)" name="submit"
id="submit" value="Save" class="submit" type="submit">
Controller:
$scope.check = function(value) {
if (value) {
updateMyProfile();
}
}
You can put conditionals inside tags. Try:
ng-class="{true:'active',false:'disable'}[list_status=='show']"
This maybe irrelevant and of no use, but as it's javascript, you don't have to use the ternary as suggested above in the ng-click statement. You should also be able to use the lazy evaluation ("or die") syntax as well. So for your example above:
<input ng-click="{{if(profileForm.$valid) updateMyProfile()}}" name="submit" id="submit" value="Save" class="submit" type="submit">
would become:
<input ng-click="profileForm.$valid && updateMyProfile()" name="submit" id="submit" value="Save" class="submit" type="submit">
In this case, if the profile is not valid then nothing happens, otherwise, updateMyProfile() is called. Like in the link @falinsky provides above.
Here's a hack I discovered that might work for you, although its not pretty and I'd personally be embarrassed to use such a line of code:
ng-click="profileForm.$valid ? updateMyProfile() : alert('failed')"
Now, you must be thinking 'but I don't want it to alert("failed") if my profileForm isn't valid. Well that's the ugly part. For me, no matter what I put in the else clause of this ternary statement doesn't get executed ever.
Yet if its removed an error is thrown. So you can just stuff it with a pointless alert.
I told you it was ugly... but I don't even get any errors when I do something like this.
The proper way to do this is as Chen-Tsu mentioned, but to each their own.
We can add ng-click event conditionally without using disabled class.
HTML:
<input ng-click="profileForm.$valid && updateMyProfile()" name="submit" id="submit" value="Save" class="submit" type="submit">
If you do have to do it this way, here's a few ways of doing it:
By far the easiest solution.
<input ng-disabled="!profileForm.$valid" ng-click="updateMyProfile()" ... >
Might be OK if you're showing/hiding some complex markup.
<div ng-if="profileForm.$valid">
<input ng-click="updateMyProfile()" ... >
</div>
<div ng-if="!profileForm.$valid">
Sorry! We need all form fields properly filled out to continue.
</div>
(remember, there's no ng-else ...)
Communicating to the user where the button is (he won't look for it any longer), but explain why it can't be clicked.
<input ng-disabled="!profileForm.$valid" ng-click="updateMyProfile()" ... >
<div ng-if="!profileForm.$valid">
Sorry! We need all form fields properly filled out to continue.
</div>
Write as
<input type="submit" ng-click="profileForm.$valid==true?updateMyProfile():''" name="submit" value="Save" class="submit" id="submit">
From http://php.quicoto.com/inline-ifelse-statement-ngclick-angularjs/, this is how you do it, if you really have to:
ng-click="variable = (condition=='X' ? 'Y' : 'X')"
Source: Stackoverflow.com