Пропустить проверку по кнопке отмены в AngularJS

Question

Я пытаюсь выполнить следующие функции. Имеют редактируемые входы формы в угловом приложении. Например, пользователь может видеть, как его имя выбирается сервером, а затем нажатием кнопки редактирования появляется текстовый ввод формы, кнопка редактирования исчезает, а на ее месте появляются кнопки сохранения и отмены. Я использую компонент угловой-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); 
}; 

Как я могу полностью избежать проверки, когда я нажимаю кнопку отмены? Я прочитал несколько ответов на подобные вопросы, предлагая изменить тип кнопки, чтобы набрать = «кнопка», но по-прежнему не решает мою проблему.

Answer 1

Подтверждение полей запускается при утере фокуса, что вызывает подтверждение. Вы можете предотвратить это поведение, используя ng-show="submitted && firstNameEditForm.firstName.$error.required" и ng-show="submitted && firstNameEditForm.firstName.$error.minlength". Это приводит к тому, что сообщение появляется только при отправке формы.

Кроме того, вы должны изменить тип кнопки обновления на submit.