CODEWITHSUNDEEP
javascripthtmlformsangularjs
Ryan B
Ryan B

Reputation: 166

Submit Button not disappearing with ng-disabled

I've set up a form with Angular integrated into it. In this form, I want the final submit button to only show up when the form is valid. There are a number of fields, but the only fields that are required are the one's for a user'a name, email-address, and a checkbox. The form recognizes when a required field is invalid, however I can't get the submit button to disappear (and subsequently reappear).

Here's code for reference:

index.html:

<form name="captions" ng-controller="CaptionCtrl>
    <div class="current-page">
      <div class="pages">
        <div class="page active" id="page1">
          <img src="images/blank_image.jpg">

          <div class="page-form">
            <span>&#8220;</span>
            <input type="text" ng-model="user.caption1" size="130"
                           placeholder="Enter your caption here.">
            <span>&#8221;</span>
            <br>
            <button class="page-form-submit" ng-click="pageShift(2)">NEXT</button>              </div>
        </div>
        <div class="page" id="page2">
          <img src="images/blank_image.jpg">

          <div class="page-form">
            <span>&#8220;</span>
            <input type="text" ng-model="user.caption2" size="130"
                           placeholder="Enter your caption here.">
            <span>&#8221;</span>
            <br>
            <button class="page-form-submit" ng-click="pageShift(3)">NEXT</button>
          </div>
        </div>
        <div class="page" id="page3">
          <img src="images/blank_image.jpg">

          <div class="page-form">
            <span>&#8220;</span>
            <input type="text" ng-model="user.caption3" size="130"
                           placeholder="Enter your caption here.">
            <span>&#8221;</span>
            <br>
            <button class="page-form-submit" ng-click="pageShift(4)">NEXT</button>
          </div>
        </div>
        <div class="page" id="page4">
          <img src="images/blank_image.jpg">

          <div class="page-form-submit-page">
            <h4>TO ENTER YOUR CAPTION IN THE CONTEST, TELL US YOUR NAME AND CONTACT METHOD.</h4>
            <input type="text" ng-model="user.name" size="70" placeholder="Name" required>
            <input type="email" ng-model="user.email" size="70" placeholder="E-mail Address" required>
            <br>
            <input type="checkbox" required>I have read and accept the Terms & Conditions
            <br>
            <input class="page-form-submit-page-submit" ng-disabled="captions | validateFields" ng-click="captionSubmit(user)" type="submit" value="SUBMIT">
          </div>
        </div>
        <div class="page" id="page5">
          <img src="images/blank_image.jpg">

          <div class="page-form-thankyou">
            <span><strong>THANK YOU</strong></span>
          </div>
          <div class="chapter-two-story-link"><span class="yellow">CLICK TO TELL US YOUR STORY</span></div>
        </div>
      </div>
    </div>
  </form>

If you notice towards the bottom, I have a ng-disabled set with "captions | validateFields". I've tried this with a simply truthy statement as well so its not the filter I set up.

Edit: With feedback I've gotten what I initially wanted to do working with ng-show. However, ng-disabled would actually be more appropriate for what I want. I've added relevant css.

style.css

.page-form-submit-page-submit {
display: block;
padding: 5px 15px;
border: none;
border-radius: 2px;
margin: 40px 400px 20px auto;
text-align: center;
background-color: #001F45;
color: #FFD200;
}

.page-form-submit-page-submit:active {
    background-color: #0250B0;
}

Can anyone explain how to get the submit button to show only after all fields are valid?

Upvotes: 0

Views: 2225

Answers (3)

Florian Gl
Florian Gl

Reputation: 6014

Try ng-enabled="captions.$valid" to disable (visible but not clickable) and ng-show="captions.$valid" to hide the button if the form is invalid.

More about forms in angular: https://docs.angularjs.org/api/ng/directive/form

Upvotes: 2

maurycy
maurycy

Reputation: 8465

It's fairly easy

hide completly

<input class="page-form-submit-page-submit" ng-if="captions.$valid" ng-click="captionSubmit(user)" type="submit" value="SUBMIT">

visually disable

<input class="page-form-submit-page-submit" ng-disabled="captions.$invalid" ng-click="captionSubmit(user)" type="submit" value="SUBMIT">

Upvotes: 0

23tux
23tux

Reputation: 14736

Not tested, but you can use the $valid property of your form like this:

<input class="page-form-submit-page-submit" ng-disabled="!captions.$valid" ng-click="captionSubmit(user)" type="submit" value="SUBMIT">

But if you want the button to disappear completely, use ng-hide="!captions.$valid" instead of the ng-disabled directive

Upvotes: 1

Related Questions