Material: md-dialog with form always submits when pressing enter key even form is invalid

[reggiepangilinan]

Hello,

I have a md-dialog with form and some input that needs to be validated before the form is submitted
i tried disabling my submit button when a form is in an invalid state but when i press the ENTER KEY
the form closes and still submits :(

Updated
this is my plunkr that has the issue
http://plnkr.co/edit/xNOqXhpDusgV2RDjVGJb

This is my markup code.

<form name="clientForm" novalidate ng-submit="clientfrmctrl.save()">
    <md-toolbar>
        <div class="md-toolbar-tools">
            <h2>Title</h2>
            <span flex></span>
            <md-button class="md-icon-button" ng-click="clientfrmctrl.cancel()">
                <md-icon md-font-set="material-icons" aria-label="Close dialog">close</md-icon>
            </md-button>
        </div>
    </md-toolbar>
    <md-dialog-content>

        <!-- NAME -->
        <md-input-container class="md-block">
            <label>Client Name</label>
            <input md-maxlength="255" required name="name" ng-model="clientfrmctrl.client.name" class="dialog-close">
            <div ng-messages="clientForm.name.$error">
                <div ng-message="required">This is required.</div>
                <div ng-message="md-maxlength">The name has to be less than 255 characters long.</div>
            </div>
        </md-input-container>

        <!-- ORGANIZATION -->
        <md-input-container class="md-block">
            <label>Client Organization</label>
            <input md-maxlength="255" required name="organization" ng-model="clientfrmctrl.client.organization">
            <div ng-messages="clientForm.organization.$error">
                <div ng-message="required">This is required.</div>
                <div ng-message="md-maxlength">The name has to be less than 255 characters long.</div>
            </div>
        </md-input-container>

        <!-- EMAIL -->
        <md-input-container class="md-block">
            <label>Contact Email</label>
            <input required type="email" name="email" ng-model="clientfrmctrl.client.email"
                   md-minlength="10" md-maxlength="255" ng-pattern="/^.+@.+\..+$/" />
            <div ng-messages="clientForm.email.$error" role="alert">
                <div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']">
                    Your email must be between 10 and 255 characters long and look like an e-mail address.
                </div>
            </div>
        </md-input-container>
    </md-dialog-content>
    <md-dialog-actions layout="row" layout-align="end">
        <md-button ng-click="clientfrmctrl.cancel()" type="button">
            Cancel
        </md-button>
        <md-button ng-disabled="clientForm.$invalid" type="submit" class="md-primary">
            Save
        </md-button>
    </md-dialog-actions>
</form>

and these are the functions it calls

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


    vm.save = function() {
        console.log('save');
    };

Anyone encountered this issue before?

I am using
"angular-material": "~0.11.4",

[bolerodan]

I believe it's because your "CLOSE" button, is not set to type="button", and I THINK thats the first element that has focus, so when pressing enter, you are entering that button, which by default, will submit the form. Add type="button" and that should solve it.

Also for the record, the latest version of anular material has md-button automatically add type="button" by default (unless you specify type="submit") to avoid this type of situation

[reggiepangilinan]

@bolerodan yes that solved the issue! thanks
good catch! i missed that button. I am aware of the issue that the md-button has the type="submit" by default (on prev versions)

but its good to know that the default is now type="button".

[richard457]

I tried this
<md-button type="submit" style="color:black;" class="md-icon-button" ng-click="cancel()">

</md-button>
but not working where am I wrong?