In the following link:

the prompt dialog box has only one input field. Can someone please tell me how can i have more than one input fields in this prompt dialogue box using mdDialog? And how can i control the order of the input fields and also if it is possible to have a text box in place of a line for the input. Thank you.

In the following link:

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

the prompt dialog box has only one input field. Can someone please tell me how can i have more than one input fields in this prompt dialogue box using mdDialog? And how can i control the order of the input fields and also if it is possible to have a text box in place of a line for the input. Thank you.

• javascript
• html
• css
• angularjs

2 Answers 2

No, not using the "prompt" method on the $mdDialog service. But what you can do is use the $mdDialog.show() which will take an object including a property 'templateUrl' which you can use to include a link to a custom HTML template file.

And example :

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

In the HTML template file (named 'dialog1.tmpl.html' in the above example) you can put as many inputfields as you want. Which you will be able to control using the controller. For course you will need to write some custom code for this...

You can have a template and load

<md-dialog aria-label="Full Screen Dialog Test" class="fullscreen-dialog">
  <md-toolbar>
    <div class="md-toolbar-tools">
      <md-button ng-click="closeDialog()" class="md-icon-button">
        <md-icon class="fa fa-times fa-2x"></md-icon>
      </md-button>
      <h2 flex="flex">Full Screen Dialog Test</h2>
    </div>
  </md-toolbar>
  <md-dialog-content>
    <form name="userForm"></form>
    <div layout="layout" layout-sm="column">
      <md-input-container style="width:80%">
        <label>Company (Disabled)</label>
        <input ng-model="user.pany" disabled="disabled"/>
      </md-input-container>
      <md-input-container flex="flex">
        <label>Submission Date</label>
        <input type="date" ng-model="user.submissionDate"/>
      </md-input-container>
    </div>
    <div layout="layout" layout-sm="column"></div>
    <md-input-container flex="flex">
      <label>First name</label>
      <input ng-model="user.firstName"/>
    </md-input-container>
    <md-input-container flex="flex">
      <label>Last Name</label>
      <input ng-model="theMax"/>
    </md-input-container>
    <md-input-container flex="flex">
      <label>Address</label>
      <input ng-model="user.address"/>
    </md-input-container>
    <md-input-container md-no-float="md-no-float">
      <input ng-model="user.address2" placeholder="Address 2"/>
    </md-input-container>
    <div layout="layout" layout-sm="column">
      <md-input-container flex="flex">
        <label>City</label>
        <input ng-model="user.city"/>
      </md-input-container>
      <md-input-container flex="flex">
        <label>State</label>
        <input ng-model="user.state"/>
      </md-input-container>
      <md-input-container flex="flex">
        <label>Postal Code</label>
        <input ng-model="user.postalCode"/>
      </md-input-container>
    </div>
    <md-input-container flex="flex">
      <label>Biography</label>
      <textarea ng-model="user.biography" columns="1" md-maxlength="150"></textarea>
    </md-input-container>
  </md-dialog-content>
</md-dialog>

DEMO