79

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.

3

8 Answers 8

154

Don't put any Condition Expression in Template.

Do it at the Controller.

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();
    }
}
7
  • 37
    For example: <a ng-click="pluginsChanged ? restartServer($event) : null" href="/">Back</a> It's very obvious from just looking at the HTML, that when this link is clicked, if the plugins have changed then the server will be restarted, otherwise nothing special will happen. If I'd put that in the controller I'd have needed a separate function because I use restartServer elesewhere, and it wouldn't be obvious in the HTML what happens.
    – Jonathan.
    Oct 1, 2014 at 15:05
  • 1
    When another person later wonders why the server sometimes restarts when the back button is clicked, it will be immediately apparent. Rather than them having to go find the function and see under what condition it restarts.
    – Jonathan.
    Oct 1, 2014 at 15:06
  • 6
    Sorry but can't consider this answer useful, you don't explain it, @Jonathan. 's comment is valid Feb 18, 2015 at 10:51
  • 1
    It is a correct answer. Flow conditionals are part of the logic and should therefore be put in the controller. Angular provides if and show directives to "represent" changes, but even them should be feed through the controller.
    – Manatax
    Jul 23, 2015 at 18:00
  • 1
    This is a perfect answer, you don't put logic inside your view, an if statement is just that logic. You make function calls that get handled by the controller through, sometimes the logic for that function is delegated out to a service if it's something that can be repeated and used in different areas of your site. Jul 26, 2015 at 19:15
61

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.

3
  • it should be " if the profile is NOT valid then nothing happens,"
    – Spring
    Mar 12, 2015 at 15:39
  • 2
    This is the correct way for this answer to a question that implements a bad practice. But again just like the other answer that is the same, it's not best practice. At the very least when logic is implemented in the view you should ask yourself A) will I ever possibly have to change this and if that answer is yes then you need to perform that logic in the controller. You start doing this throughout your website and it's going to be real hard to test anything or change anything in the future. THis is a gateway drug to lots of headaches. Jul 26, 2015 at 19:19
  • IMO, this is the best solution for the given problem. If the validity condition is a little complex, it can surely go into controller. Thanks! May 9, 2017 at 18:55
36

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.

2
  • 2
    Sometimes it just makes sense to do it in the template. Thanks for the tip. Was getting the error two because the ternary wants a positive and negative result. This worked for me : ciCtrl.iconSelections.style === 2 ? ciCtrl.iconSelections.style = 1 : blah Oct 28, 2014 at 1:36
  • I use something like this in multiple places. ng-class="column.columnname !='vendor' ? 'alt-content-hoverable' : false" Dec 5, 2017 at 19:25
13

If you do have to do it this way, here's a few ways of doing it:

Disabling the button with ng-disabled

By far the easiest solution.

<input ng-disabled="!profileForm.$valid" ng-click="updateMyProfile()" ... >

Hiding the button (and showing something else) with ng-if

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 ...)

A mix of both

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>
6

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')"
5

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">
1
  • This answers the question, I just wouldn't call it a best practice. But again it perfectly answers the question. I feel it should be caveated with a statement explaining why it is bad form. But you can't get say he didn't answer the actual question. Jul 26, 2015 at 19:17
1

Write as

<input type="submit" ng-click="profileForm.$valid==true?updateMyProfile():''" name="submit" value="Save" class="submit" id="submit">
0

You can put conditionals inside tags. Try:

ng-class="{true:'active',false:'disable'}[list_status=='show']"

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.