Wie machen Sie das $ mdDialog.prompt() Feld erforderlich

Question

Hier ist ihr Demo-Skript. Wie fordere ich, dass das Feld benötigt wird?

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

Derzeit können Sie ein leeres Feld eingeben und dann die Abfrage bestätigen, den Dialog verursacht zu schließen und die Erfolgsfunktion mit einem nicht definierten Ergebniswert

Im Idealfall zu provozieren, würde ich einen Fehler wie Meldung angezeigt und der Dialog bleibt geöffnet, wenn ein leeres Feld existiert.

Ich bin sicher, dass ich das mit einem benutzerdefinierten Dialog erreichen können, aber hatte gehofft, dass es eine einfache Einstellung war, dass ich fehle

Answer 1

Sie können hier Dokumentation

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

} 

lesen hier überprüfen https://material.angularjs.org/latest/api/service/ $ mdDialog

Answer 2

Nur Lösung ich weiß, es ist eine benutzerdefinierte Vorlage für mdDialog Komponente zu erstellen.

$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

Ich lief über diese und ab Angular Material 1.1.5 gibt es eine neue erforderliche Option in der Eingabeaufforderung, die dies anspricht. Die Referenz docs noch nicht aktualisiert worden, aber die Demos zeigen die Nutzung:

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');