How to conditionally show message using ng-if in angular

Question

I am trying to show a message to user if email address is already registered or message saying "thanks for signing up!"

Form 1:

<div>
    <button type="submit" data-target="#publisherVerification">Sign up</button>
</div>

<div id="publisherVerification" ng-if="flag===true">
    <div>
        <p>Thank you for signing up.</p>
    </div>
</div>

<div id="publisherVerification" ng-if="flag===false">
    <div>
        <p>User already registered. Please use login.</p>
    </div>
</div>

Form 2:

<div>
    <button type="submit"  data-target="#artistVerification">Sign up</button>
</div>

<div id="artistVerification" ng-if="flag === true">
    <div>
        <p>Thank you for signing up</p>
    </div>
    <div id="artistVerification" ng-if="flag === false">
        <div>
            <p>User already registered. Please use login.</p>
        </div>
    </div>
</div>

Both the above forms are in the same page and calling same function on button click.

Its working but both forms are displaying messages if the user is "already register or new user" because they are calling same function. How do I show message for particular form only. I know I can create separate function for each form but I want try it with single function.

Adam · Accepted Answer · 2016-06-10 19:11:46Z

2

The issue is that both ng-ifs are using the same flags. You'll need to differentiate between the artist flag and the publisher flag.

Also, there should be a flag which hides the message at the start, only revealing when the user has submitted.

To solve this, I passed a user parameter to the shared submit function.

<button type="submit" ng-click='submitForm( "publisher" )' data-target="#publisherVerification">Sign up</button>

<div id="publisherVerification" ng-if="submitted.publisher ===true">
   <div ng-if="flags.publisher===true">
     <p>Thank you for signing up.</p>
   </div>
   <div ng-if="flags.publisher===false">
      <p>User already registered. Please use login.</p>
    </div>
   </div>  
</div>

Here's a JSFiddle with a working solution: https://jsfiddle.net/adamback42/x50kyh6n/4/

answered Jun 10, 2016 at 19:11

Adam

2,1071 gold badge17 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kittu Over a year ago

Thank you so much :) I am still testing it.

Joseph · Accepted Answer · 2016-06-10 18:28:27Z

0

use different object to show different messages, eg: set publisherVerification.flag = true, when the publisherVerification is successful for signup else set publisherVerification.flag = false;

similar for the artistVerification use artistVerification.true when artistVerification is successful for signup else set false for artistVerification.flag;

this will help you separate your code for publisherVerification and artistVerification which is much more cleaner.

answered Jun 10, 2016 at 18:28

Joseph

6925 silver badges17 bronze badges

1 Comment

kittu Over a year ago

different objects?

Collectives™ on Stack Overflow

How to conditionally show message using ng-if in angular

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related