AngularJS表单：仅在表单脏且密码匹配时显示添加按钮

嘿，我来帮你搞定这个表单按钮的显示逻辑问题！你的需求很明确：默认隐藏添加按钮，只有表单被修改过（dirty状态）且两次密码输入一致时才显示，咱们一步步拆解解决方案：

1. 先把密码匹配的逻辑理清楚 #

首先得确保密码和确认密码的输入框都正确绑定了ng-model，这样才能在视图或控制器里判断两者是否一致。比如：

<!-- 密码输入框 -->
<input ng-model="newLogin.password" name="password" type="password" class="form-control" required>
<!-- 确认密码输入框 -->
<input ng-model="newLogin.confirmPassword" name="confirmPassword" type="password" class="form-control" required>

2. 正确利用表单的$dirty状态 #

你的表单已经设置了name="addUserForm"，AngularJS会自动把这个表单对象挂载到作用域上，它自带的$dirty属性会在表单内任意输入框被修改后变成true，这正是我们需要的“表单被改动过”的判断依据。

3. 按钮显示/隐藏的核心逻辑 #

把两个条件结合起来，用ng-show控制按钮显示（因为ng-show默认就是隐藏元素，只有条件为真时才显示，完美符合你的默认隐藏需求）：

<button type="submit" class="btn btn-sm btn-primary" 
        ng-show="addUserForm.$dirty && newLogin.password && newLogin.confirmPassword && (newLogin.password === newLogin.confirmPassword)">
  添加用户
</button>

这里额外加了newLogin.password && newLogin.confirmPassword的判断，是为了避免用户还没输入密码时，两个空值被判定为“匹配”的情况，如果你不需要这个限制，可以去掉这部分。

4. 容易踩坑的地方要注意 #

• 一定要初始化$scope.newLogin对象：在控制器里加一句$scope.newLogin = {};，避免一开始newLogin.password是undefined导致判断出错。
• 表单的name属性不能写错：必须和你在ng-show里用的addUserForm一致，不然AngularJS找不到表单对象。
• 如果需要更严谨的验证，可以结合表单的$valid状态：比如判断密码输入框是否符合必填要求，像这样：

  ng-show="addUserForm.$dirty && addUserForm.password.$valid && addUserForm.confirmPassword.$valid && (newLogin.password === newLogin.confirmPassword)"
  

完整的简化示例代码 #

给你一个能直接参考的完整版本：

<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)" 
               name="email" type="text" class="form-control input-sm" 
               placeholder="邮箱" required>
      </div>
      <div class="col-xs-3 col-sm-3">
        <input ng-model="newLogin.password" name="password" 
               type="password" class="form-control input-sm" 
               placeholder="密码" required>
      </div>
      <div class="col-xs-3 col-sm-3">
        <input ng-model="newLogin.confirmPassword" name="confirmPassword" 
               type="password" class="form-control input-sm" 
               placeholder="确认密码" required>
      </div>
      <div class="col-xs-3 col-sm-3">
        <button type="submit" class="btn btn-sm btn-primary" 
                ng-show="addUserForm.$dirty && newLogin.password && newLogin.confirmPassword && (newLogin.password === newLogin.confirmPassword)">
          添加用户
        </button>
      </div>
    </div>
  </form>
</div>

angular.module('myApp', [])
.controller('MyCtrl', function($scope) {
  $scope.name = '用户';
  $scope.newLogin = {}; // 初始化对象，避免undefined问题
  
  $scope.checkEmailRestriction = function(email) {
    // 这里放你的邮箱校验逻辑
  };
});

这样调整后，按钮就会严格按照你的需求显示和隐藏啦～

内容的提问来源于stack exchange，提问作者code-8