Angular Validation render ng-valid when form is not valid

Question

I have a wedding RSVP form

I am trying hide the DONE submit button and only show it when the form is valid.

<form method="POST" action="http://l.bheng.com:8888/wedding" accept-charset="UTF-8" class="ng-pristine ng-pristine ng-valid ng-valid-required ng-valid-email" role="form" id="rsvp-form" name="rsvp-form">
    <input name="_token" type="hidden" value="JK8PC04aF7xGsbcQoTvzz2FV61od1DmGdraiZNwB">
    <div class="col-xs-12 form-group">
        <label for="">Are you attending ? </label>
        <br>
        <label for="going">
            <input type="radio" id="going" value="1" ng-model="going" class="ng-pristine ng-untouched ng-valid ng-not-empty" name="3"> Yes
        </label>
        <label for="going">
            <input type="radio" id="going" value="0" ng-model="going" class="ng-pristine ng-untouched ng-valid ng-not-empty" name="4"> No
        </label>
    </div>
    <div class="col-xs-12 form-group">
        <label for="">Number of total guests ? </label>
        <br>
        <select id="guestNum">
            <option value="1">Just Me</option>
            <option value="2">Me and My +1</option>
        </select>
    </div>
    <div class="col-xs-12 form-group">
        <label for="">Name</label>
        <input type="text" class="normal ng-pristine ng-untouched ng-valid ng-empty ng-valid-required" id="name" placeholder="Name" ng-model="name" ng-required="required">
    </div>
    <div class="col-xs-12 form-group">
        <label for="">Email</label>
        <input type="email" class="normal ng-pristine ng-untouched ng-valid ng-empty ng-valid-email ng-valid-required" placeholder="Email Address" id="email" ng-required="required" ng-model="email">
    </div>
    <div class="col-xs-12 form-group">
        <label for="">Message</label>
        <textarea id="message" ng-model="message" rows="5" type="text" class="normal ng-pristine ng-untouched ng-valid ng-empty" placeholder="Message to us "></textarea>
        <grammarly-btn>
            <div data-reactroot="" class="_e725ae-textarea_btn _e725ae-anonymous _e725ae-not_focused" style="visibility: hidden; z-index: 2;">
                <div class="_e725ae-transform_wrap">
                    <div title="Protected by Grammarly" class="_e725ae-status">&nbsp;</div>
                </div>
            </div>
        </grammarly-btn>
    </div>
    <div class="col-xs-12" ng-hide="rsvp-form.name.$invalid || rsvp-form.email.$invalid ">
        <a id="rsvp-submit" ng-click="rsvp()" class="button" style="width: 100%;">

                  Done

                  <img src="/img/svg/default.svg" alt="Loading" style="width: 30px; float: right; padding-top: 7px; " class="hidden loading">

                </a>
    </div>
</form>

My Done button keep showing no matter what.

How do I stop that ?

How can my form have this class ?

• ng-pristine
• ng-valid <--- How is it possible ? I'm not even input anything in name/email
• ng-valid-required <--- How is it possible ? I'm not even input anything in name/email
• ng-valid-email <--- How is it possible ? I'm not even input anything in name/email

JSfiddle = https://jsfiddle.net/bheng/Ln3tqzcu/

Answer 1

Shouldn't you name your form rsvpForm (and all its occurrences) instead of rsvp-form? I don't think rsvp-form is valid name in JavaScript. And it may be a reason why it does not work. And maybe you should turn off HTML validation with novalidate on form tag, and use simply required instead of ng-required="required", cause IMO it tries to find $scope.required, which is undefined and directive does not work properly.Working fiddle: https://jsfiddle.net/od62sshv/3/

Answer 2

The usage for ng-valid is as such:

ng-valid="isValid()"

Where the expression can be accessed by the DOM and will return a boolean value. Example:

$scope.isValid = function () {
  return True;
}

If yo want to make the 'Done' button disappear, though, you want ng-hide, ng-show and preferably, ng-if. Look them up. ng-valid will only grey-out the button.

EDIT:
Here's a more comprehensive example for ng-valid, for clarity's sake.

HTML:

<input type="text" name="email" class="somethingUnrelated" ng-model="email">
<input type="button" name="confirm" class="somethingElse" ng-valid="isValid()">

JS:

$scope.isValid = function () {
   if ($scope.email) {
     return $scope.email.length > 0;
   }
 }

This would not make your button disappear, only greyed-out. If you want it gone, replace ng-valid with ng-show.