How to make the $ mdDialog.prompt () field necessary?

Question

Here is their demo script. How do I require a field to be needed?

var confirm = $mdDialog.prompt() .title('What would you name your dog?') .textContent('Bowser is a common name.') .placeholder('Dog name') .ariaLabel('Dog name') .initialValue('Buddy') .targetEvent(ev) .ok('Okay!') .cancel('I\'ma cat person'); $mdDialog.show(confirm).then(function(result) { $scope.status = 'You decided to name your dog ' + result + '.'; }, function() { $scope.status = 'You didn\'t name your dog.'; }); 

Currently, you can enter an empty field and then confirm the request, as a result of which the dialog closes and the success function is called by the result value undefined

Ideally, I would like an error message to appear and the dialog will remain open when there is an empty field.

I'm sure I can achieve this through a special dialog, but I hoped there was a simple setup that I skip

Answer 1

I came across this and with Angular Material 1.1.5 in the query chain there is a new required parameter that refers to this. Reference documents have not been updated yet, but demos show usage:

 var confirm = $mdDialog.prompt() .title('What would you name your dog?') .textContent('Bowser is a common name.') .placeholder('Dog name') .ariaLabel('Dog name') .initialValue('Buddy') .targetEvent(ev) .required(true) // <---- New required option .ok('Okay!') .cancel('I\'ma cat person'); 

Answer 2

you can check here

  $mdDialog.show(confirm).then(function(result) { if(result!=undefined) { $scope.status = 'You decided to name your dog ' + result + '.'; }else { alert("Wrong Input Enter "); } } 

Read the documentation here https://material.angularjs.org/latest/api/service/ $ mdDialog

Answer 3

Only the solution that I know creates a custom template for the mdDialog component .

 $scope.showPrompt = function(user) { $mdDialog.show({ templateUrl: 'app/views/your-dialog.tpl.html', locals: { callback: $scope.yourFunction // create the function $scope.yourFunction = function (yourVariable) { }, controller: function ($scope, $mdDialog, callback) { $scope.dialog.title = 'Your title'; $scope.dialog.abort = function () { $mdDialog.hide(); }; $scope.dialog.hide = function () { if ($scope.Dialog.$valid){ $mdDialog.hide(); callback($scope.yourReturnValue, likes the return of input field); } }; }, controllerAs: 'dialog', bindToController: true, clickOutsideToClose: true, escapeToClose: true }); 

};