你如何使$ mdDialog.prompt（）的字段成为必需

Question

这是他们的演示脚本。 我如何要求该字段是必需的？

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\'m a 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.';
});

目前，您可以输入一个空字段，然后确认提示，导致对话框关闭，并使用未定义的结果值激活成功函数

理想情况下，我希望显示一条错误消息，并且当存在空字段时，对话框将保持打开状态。

我确信我可以通过自定义对话框实现这一目标，但我希望有一个简单的设置让我失踪

Answer 1

我跑过这个，从Angular Material 1.1.5开始 ，在提示链中有一个新的必需选项来解决这个问题。 参考文档尚未更新，但演示显示了用法：

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\'m a cat person');

Answer 2

只有解决方案才知道为mdDialog组件创建自定义模板 。

$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
});

};

Answer 3

你可以在这里查看

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

}

阅读文档https://material.angularjs.org/latest/api/service/ $ mdDialog