仅在表单脏时显示“添加”按钮

Question

I have a form with email, password, and password again. I want to hide the add sign by default, and only show it if my form is dirty and password matches password again .

I can't seem to get it to work.

<div ng-controller="MyCtrl">
  Hello, {{name}}!

  <form name="addUserForm">
    <div class="form-row row">
      <div class="col-xs-3 col-sm-3">
        <input ng-model="newLogin.email" ng-blur="checkEmailRestriction(newLogin.email)" required type="text" class="form-control input-sm" placeholder="Email">
      </div>
      <div class="col-xs-3 col-sm-3">
        <input ng-model="newLogin.password" required stopccp type="password" class="form-control input-sm" ng-change="checkPwdRestriction(newLogin.password)" placeholder="Password">
      </div>
      <div class="col-xs-3 col-sm-3">
        <input stopccp ng-model="newLogin.passwordAgain" ng-change="checkPwdMatch(newLogin.password,newLogin.passwordAgain)" type="password" class="form-control input-sm" placeholder="Password Again">
      </div>
      <div class="col-xs-3 col-sm-3">
        <a ng-click="storeLogin()" ng-if="newLogin.password === newLogin.passwordAgain && addUserForm.$dirty == false" class="btn btn-xs email-action"> add </a>
      </div>


    </div>
  </form>


  <hr>


  <p>
    object = ? {{newLogin}}
  </p>


  <p>
    $dirty = ? {{addUserForm.$dirty}}
  </p>


  <p>
    $valid = ? {{addUserForm.$valid}}
  </p>


</div>

I've tried

http://jsfiddle.net/bheng/5pzL8gc3/

Answer 1

I hided your button with this :

ng-show="newLogin.password && newLogin.password == newLogin.passwordAgain && addUserForm.$dirty == true"

And it appears when I provide an email and passwords that match.