Angular MaterialJS Dialog form with different save

2020-08-03 09:43发布

问题:

I'm trying to save form data in mdDialog but with options of (save and close) the dialog and (save) which will save the form data then open another dialog empty dialog without having to close and open the mdDialog again, the problem is how to call same SaveData function in same form for both save operations?

$scope.saveData = function (isValid) {
        if (isValid) {
          updateservice.postdata($scope.myformdata)
            .then(function (data) {
              $mdDialog.hide();
            });
      // error handling
        } 
      };

and in the template:

<md-dialog>
  <form name="form" ng-submit="saveData(form.$validform)" novalidate>
    <md-dialog-content>
      <div class="md-dialog-content">
        <div>
        </div>
        <table class="table display" border="1" span="1" name="newForm" novalidate role="form" ng-style="{ width: th.width }">
           </tr>
          <tr>
            <td><input type="text" class="form-control text-center" placeholder="required"  ng-required="true"></td>
            <td><input type="text" class="form-control text-center" placeholder="optional" ng-required="true"></td>
          </tr>
        </table>
      </div>
    </md-dialog-content>
    <md-dialog-actions layout="row">
      <md-progress-circular md-mode="indeterminate" md-diameter="20px" class="spinner"></md-progress-circular>
      <button type="button" class="btn btn-primary" ng-click="save()" >Save</button> 
      <button type="submit" class="btn btn-primar">Save and close</button> 
      <button type="button" class="btn btn-default" ng-click="cancel()" ng-disabled="loading">Cancel</button>
      </md-dialog-actions>
  </form>
</md-dialog>

I changed Save button with type button is not posting the formdata, and changing type to submit like save and close saves data then opens and closes the dialog.

here's codePen with my code:

https://codepen.io/anon/pen/ZqoYRx

回答1:

How about passing an argument like isSaveAndClose in the save function:

In HTML:

<button type="button" class="btn btn-primary" ng-click="save(false)" ng-show="!loading">Save</button> 
<button type="button" class="btn btn-primar" ng-click="save(true)">Save and close</button>

In JS:

$scope.save = function (isSaveAndClose) {
      saveData();
      if (isSaveAndClose)
        $mdDialog.hide().then(showCustomConfirm);
    };