CODEWITHSUNDEEP
javascriptangularjs
zb22
zb22

Reputation: 3231

AngularJS Material How to make text field as password for prompt dialog?

I'm using AngularJS Material library and I'm trying to popup a prompt dialog for the user to enter a password.

The dialog works fine, but the thing is that the text field is not of type 'password' and the password is visible.

Is there any way to make the make the text field as type password? or the only way is to make a custom dialog?

This is a sample from AngularJS Material website:

$scope.showPrompt = function(ev) {
// Appending dialog to document.body to cover sidenav in docs app
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)
  .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.';
});
};

https://material.angularjs.org/latest/demo/dialog

Thank you.

Upvotes: 1

Views: 1839

Answers (3)

Eduardo Mendez Ortiz
Eduardo Mendez Ortiz

Reputation: 31

prompt is a prefab dialog you need to use a custom dialog

 $scope.showAdvanced = function() 
{
    $mdDialog.show({
      controller: DialogController,
      templateUrl: './html/dialog1.tmpl.html', //custom template to load on the dialog
      parent: angular.element(document.body),
      clickOutsideToClose:true,
      fullscreen: $scope.customFullscreen // Only for -xs, -sm breakpoints.
    })
    .then(function(answer) {
      $scope.status = 'You said the information was "' + answer + '".';
    }, function() {
      //close the dialog
    });
};

the dialog controller

 function DialogController($scope, $mdDialog) {
    $scope.hide = function() {
      $mdDialog.hide();
    };

    $scope.cancel = function() {
      $mdDialog.cancel();
    };

    $scope.answer = function(answer) {
      $mdDialog.hide(answer);
    }
  } // dialog controller end

Inside the template you simply add the code you need

 <md-input-container style="margin-top:50px">
    <label style="border-color: white; color: white; text-align:left;">Contraseña</label>
        <input type="password" name="pass" ng-model="pass" required md-no-asterisk >
               <div ng-messages="ingresoForm.pass.$error">
               <div ng-message="required">Este campo es requerido</div>
        </div>

 </md-input-container>

and finally call your dialog

$scope.showAdvanced();

you can fin the whole documentation here: https://material.angularjs.org/latest/demo/dialog

Greetings!

Upvotes: 2

MagicalConch
MagicalConch

Reputation: 34

Please refer to the following code：

<md-input-container class="md-block logininput" flex-gt-sm>
    <label>key</label>
    <input type="password" ng-model="user.key" required>
    <div ng-messages="userForm.postalCode.$error" role="alert" multiple>
        <div ng-message="required" class="my-message">Please input a password！</div>
    </div>
</md-input-container>

Upvotes: 0

Matt
Matt

Reputation: 21

To create a password input field i just set the type inside the html tag 

<input type="password">

Upvotes: -1

Related Questions