跳过某些字段的角度表单验证

Question

我有一个页面，其中有一个名为配置文件更新的表单，当用户访问此页面以更新他的配置文件时，他只更新 1 或 2 个字段，因此每次表单检查表单是否有效或然后不仅保存在数据库中，而且如果密码和确认密码字段未更新，我想保存然后更新他的个人资料，而且当他想更改密码时，时间保存按钮将被禁用并在更新个人资料后检查验证.

表示当用户仅更新名称时，该时间也会更新配置文件，并且用户更新密码时首先检查验证，然后更新配置文件。

保存并isValid检查：

app.controller('DemoCtrl', function($scope, $http) {
 $scope.saveProfile = function(){
            if($scope.profile.$valid){
                ngProgress.start();
                user.saveProfile($scope.currentUser.details,function(response){
                    angular.copy(response,shared.data.currentUser);
                    notification.success($filter("il8n")("_ProfileUpdateMessage_"));
                    ngProgress.done();
                });
            }
        }

   $scope.isValidForm = function(){

            //if(($scope.profile.confirmpassword && $scope.profile.newpassword && $scope.profile.newpassword.$modelValue !== $scope.profile.confirmpassword.$modelValue))
            //    return true;
            if(!$scope.profile.$valid){
               if(($scope.profile.confirmpassword && $scope.profile.newpassword && $scope.profile.confirmpassword.$modelValue && $scope.profile.newpassword.$modelValue && ($scope.profile.newpassword.$modelValue.length == 0 || $scope.profile.confirmpassword.$modelValue.length == 0))){
                   return false;
               }
                if(($scope.profile.confirmpassword && $scope.profile.newpassword && $scope.profile.confirmpassword.$modelValue && $scope.profile.newpassword.$modelValue && $scope.profile.newpassword.$modelValue ===  $scope.profile.confirmpassword.$modelValue)){
                    return false;
                }
            }
            if($scope.profile.$valid && $scope.profile.$dirty)
                return false;

            if($scope.profile.newpassword.$invalid || $scope.profile.newpassword.$dirty &&  $scope.profile.confirmpassword.$invalid || $scope.profile.confirmpassword.$dirty){
                //$scope.profile.newpassword.$valid;
                //$scope.profile.confirmpassword.$valid;
                return false;
            }
            //if($scope.profile.newpassword.empty &&  $scope.profile.confirmpassword.empty ){
            //   return true;
            //}
            return true;
        }      
 });

找到 plnkr here。

Answer 1

在我看来，您想要用户可以更新几个字段然后更新它们的表单吗？

关于密码更改，我认为您应该将个人资料信息从密码更改拆分为两种单独的形式，用户可以在不更改其他数据的情况下更改密码。然后如果用户想要更改其他用户数据（绑定到 ng-model 并已放入文本框中），则用户更改数据并保存。

问题解决了。如果你愿意，我可以尝试编辑你的 plunk 并展示它的样子:)

Plunk - New format

<form ng-submit="SAVE FUNCTION HERE">
      <fieldset>
        <div class="row">
          <div class="col-sm-4">
            <label class="proxima-nova nova-bold form-label">Change Password</label>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-3">
            <label data-ng-class="{'state-error': profile.newpassword.$invalid && profile.newpassword.$dirty && profile.newpassword.$error.strongPassword}">
              <input type="password" class="form-control" placeholder="Enter new password" data-ng-model="currentUser.details.password" name="newpassword" data-password-check="currentUser.details.password" />
            </label>
            <div class="ng-cloak invalid" data-ng-show=" profile.newpassword.$error.strongPassword && profile.newpassword.$dirty && profile.newpassword.$invalid">
              Password should contain atleast one special character, number, uppercase letter, and atleast 8 characters.
            </div>
          </div>
          <div class="col-sm-3">
            <label data-ng-class="{'state-error': profile.confirmpassword.$dirty && currentUser.details.password != currentUser.details.password_confirmation}">
              <input type="password" class="form-control" placeholder="Confirm password" data-ng-model="currentUser.details.password_confirmation" name="confirmpassword" />
            </label>
            <div class="ng-cloak invalid" data-ng-show="profile.confirmpassword.$dirty && currentUser.details.password != currentUser.details.password_confirmation">
              Passwords do not match
            </div>
          </div>
        </div>
      </fieldset>
    </form>

同样在表单域中，你可以添加type="submit"的保存按钮，然后该按钮将调用定义在表单标签中的函数

<form ng-submit="SAVE FUNCTION HERE">