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

时间:2018-04-12 18:15:01

标签: javascript html angularjs forms

我有一个包含电子邮件,密码和密码的表单。我想默认隐藏添加标志,只有在我的表单变脏且密码再次匹配密码时才显示。

我似乎无法让它发挥作用。

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

我试过

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

enter image description here

1 个答案:

答案 0 :(得分:1)

我用这个隐藏了你的按钮:

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

当我提供匹配的电子邮件和密码时会出现。