Question

我尝试实现以下功能。在角度应用程序中具有可编辑的表单输入。例如，用户可以看到服务器提取他的名字，然后单击编辑按钮，显示表单文本输入，编辑按钮消失，并在其位置显示按钮保存和取消。我使用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”，但仍然无法解决我的问题。

Answer 1

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

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

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

1 个答案: