javascript - 在AngularJS中的取消按钮上跳过验证

我尝试实现以下功能。在角度应用程序中具有可编辑的表单输入。例如，用户可以看到服务器提取了他的名字，然后单击“编辑”按钮，出现了表单文本输入，“编辑”按钮消失了，并且在其位置出现了“保存”和“取消”按钮。我使用angular-bootstrap-show-errors组件显示错误。

但是，如果在编辑过程中未满足验证规则，并且单击“取消”按钮，则表单将尝试显示错误，然后再返回到初始状态。例如，我按编辑并删除所有名字字符，然后按取消，因此在消失之前它会进行验证。以下是我的看法。

<!--First name edits-->
<div class="row">
    <form name="firstNameEditForm" role="form" novalidate>
        <div class="col-xs-3">
            <p class="text-right">First Name:</p>
        </div>
        <div class="col-xs-6" ng-if="model.beforeFirstNameEdit">
            <p class="text-success">
                {{accountData.firstname || "Loading..."}}
            </p>
        </div>

        <div class="col-xs-6" ng-if="!model.beforeFirstNameEdit">
            <div class="form-group" show-errors>
                <input name="firstName" ng-model="accountData.firstname" class="form-control" placeholder="First Name" type="text" required minlength=2 auto-focus />
                <small class="help-block" ng-if="firstNameEditForm.firstName.$error.required">At least 2 characters required</small>
                <small class="help-block" ng-if="firstNameEditForm.firstName.$error.minlength">At least 2 characters required</small>
            </div>
        </div>

        <div class="col-xs-3" ng-if="model.beforeFirstNameEdit">
            <button type="button" class="btn btn-warning btn-xs" ng-click="editFirstName()">Edit</button>
        </div>

        <div class="col-xs-3" ng-if="!model.beforeFirstNameEdit">
            <button type="button" class="btn btn-success btn-xs" ng-click="update(accountData.firstname)">Save</button>
            <button type="button" class="btn btn-danger btn-xs" ng-click="cancelFirstNameEdit()">Cancel</button>
        </div>
    </form>
</div><!--First name edits-->

和控制器

$scope.preFirstNameEditModel = {};
$scope.editFirstName = function() {
    // Copy preedited data locally
    $scope.model.beforeFirstNameEdit = false;
    $scope.preFirstNameEditModel = angular.copy($scope.accountData.firstname);
}

$scope.cancelFirstNameEdit = function(){
    $scope.model.beforeFirstNameEdit = true;
    $scope.accountData.firstname = angular.copy($scope.preFirstNameEditModel);
};

单击取消按钮时，如何完全避免验证？我读了一些类似问题的答案，建议将按钮的类型更改为type =“ button”，但仍然不能解决我的问题。

最佳答案

在焦点丢失时触发字段的验证，这导致验证消息。您可以通过使用ng-show="submitted && firstNameEditForm.firstName.$error.required"和ng-show="submitted && firstNameEditForm.firstName.$error.minlength"防止此行为。这将导致仅在提交表单时显示消息。

此外，您必须将更新按钮的类型更改为submit。

关于javascript - 在AngularJS中的取消按钮上跳过验证，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35454580/