2

When I open a modal dialog and without making a change, I click on cancel button, I expect the dialog to close.

But in case I have a validation on the textbox currently in focus, the validation text still appears when the focus moves out of the text box. The mentioned behavior can be seen in the following plunker -

https://plnkr.co/edit/5VsL59iCh7smS1wfEwFZ

<input type="text" autofocus ng-model="$ctrl.textValue" ng-blur="$ctrl.validate()">

Also, as reproducible in the above link, if I click on the cancel button near the top of the button, the click never completes (though the focus is shifted to the button) and the modal dialog does not close.

Any suggestion on how I can make sure that the click on the button completes or if the blur event can be avoided in case the dialog is being cancelled.

SoftEngi
  • 407
  • 4
  • 14

2 Answers2

1

You can call $ctrl.validate() inside $ctrl.ok() function. So ng-blur can also be removed.

  $ctrl.ok = function () {
    $ctrl.validate ();
     if(!$ctrl.textValue) {
      $ctrl.invalidControl = true;
    }
    else
    $uibModalInstance.close($ctrl.selected.item);
  };

Hope it helps :)

Working Plunker: https://plnkr.co/edit/70vdDsbFrSehaHR9TXNp?p=preview

The below code snippet demonstrates how form validation can be done. So since you have many fields you can validate each field with your desired validations.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>  
<body>

<h2>Validation Example</h2>

<form ng-app="myApp" ng-controller="validateCtrl" 
name="myForm" novalidate>

<p>Username:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username is required.</span>
</span>
</p>

<p>Email:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>

<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||  
myForm.email.$dirty && myForm.email.$invalid">
</p>

</form>

<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
    $scope.user = 'John Doe';
    $scope.email = 'john.doe@gmail.com';
});
</script>

</body>
</html>
Vivz
  • 6,625
  • 2
  • 17
  • 33
  • But I need to validate the control on losing focus too. And in my actual form, I have many such controls which need to be validated. – SoftEngi Jun 23 '17 at 10:28
  • You can use form validations if you have to validate each field in your form – Vivz Jun 23 '17 at 10:40
  • please elaborate on form validations and how that can help with my case. – SoftEngi Jun 23 '17 at 10:42
  • I would still not be able to prompt user when the he moves on to the next field without specifying data in the field currently in focus – SoftEngi Jun 23 '17 at 11:49
  • But all errors will show up when he click ok button. That provides the same functionality – Vivz Jun 23 '17 at 12:37
  • On clicking OK the behavior remains the same, but on losing focus from control, the user is not informed about the missing value and that is the requirement I have. – SoftEngi Jun 29 '17 at 06:43
  • If you want the user to be informed about the missing value when he loses focus , then you have to call a function in ng-blur. But this will be a tedious process if you have many fields. What I will suggest is do form validations and if there is a missing data, don't allow the user to click ok( disable it) unless all required fields are filled – Vivz Jun 29 '17 at 07:01
0

Move the validate function into the $ctrl.ok() and remove it form the view. 

$ctrl.ok = function () {
    if(!$ctrl.validate())
      $uibModalInstance.close($ctrl.selected.item);
    else
      return
  };

Here it is the working example: link

Beslinda N.
  • 4,808
  • 5
  • 27
  • 33