AngularJS/Angular Material form validity with md-select

Question

I'm using AngularJS and Angular Material for a web app I'm building, and I have the following HTML form in a dialog window:

<form name="cdc.clientForm">
    <md-dialog class="userDialog" ng-init="cdc.init()">
        <md-dialog-content>
            <md-input-container flex>
                <label>Company name</label>
                <md-select ng-model="cdc.client.companyName" required>
                    <md-option value="Company 1">Company 1</md-option>
                    <md-option value="Company 2">Company 2</md-option>
                </md-select>
                </md-input-container>
                <md-input-container>
                    <label>Client name</label>
                    <input type="text" ng-model="cdc.client.name" required>
                </md-input-container>
        </md-dialog-content>
        <md-dialog-actions>
            <md-button ng-click="cdc.submit()" ng-disabled="cdc.clientForm.$invalid">OK</md-button>
            <md-button ng-click="cdc.cancel()">Cancel</md-button>
        </md-dialog-actions>
    </md-dialog>
</form>

And I have the following controller behind it:

(function () {
    'use strict';
    angular
        .module('main')
        .controller('ClientDialogController', ClientDialogController);

    ClientDialogController.$inject = ['$mdDialog', 'client'];

    function ClientDialogController($mdDialog, $q, client) {
        var vm = this;
        vm.init = init;
        vm.submit = submit;
        vm.cancel = cancel;

        function init() {
            if ((client !== undefined) && (client !== null)) {
                vm.client = client;
            }
        };

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

        function submit() {
            $mdDialog.hide(vm.client);
        };
    };
})();

I'm reusing the dialog form for both the creation and update of my model.

My problem lies basically with the form validity when I want to edit the object.

If I have a md-select in the form, and the md-select is required and it's pristine, as in, the user doesn't modify the select value, then the form is considered invalid. Removing the select, only with text inputs with a bound model, I don't have the issue, the forms is considered valid.

How could I fix this issue, what would be a recommended way to deal with this?

Answer 1

Well, I figured this out on my own, maybe it will help somebody else.

The key to this was already in the docs under the "Selects and object equality" part, I just didn't notice it, as it's not that obvious.

The problem lies with the way Javascript check for equality, if I add the ng-model-options directive as below, the form is set to be valid:

<md-select ng-model="cdc.client.companyName" required ng-model-options="{trackBy: '$value'}">
    <md-option value="Company 1">Company 1</md-option>
    <md-option value="Company 2">Company 2</md-option>
</md-select>