AngularJS/Angular Material 表单有效性与 md-select

Question

我正在为正在构建的 Web 应用程序使用 AngularJS 和 Angular Material，并且在对话框 window 中有以下 HTML 表单：

<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>

我的背后有以下控制器：

(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);
        };
    };
})();

我正在重复使用对话框来创建和更新我的模型。

我的问题主要在于编辑对象时的表单有效性。

如果我在表单中有一个 md-select，并且 md-select 是必需的并且它是原始的，例如，用户不会修改 select值，那么表单被认为是无效的。删除 select，只有带有绑定模型的文本输入，我没有问题，表单被认为是有效的。

我该如何解决这个问题，推荐的处理方法是什么？

Answer 1

好吧，这是我自己想出来的，也许它会对其他人有所帮助。

这个关键已经在"Selects and object equality"部分的docs里面了，只是没注意到，因为不是很明显。

问题在于 Javascript 检查相等性的方式，如果我按如下方式添加 ng-model-options 指令，表单将设置为有效：

<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>

AngularJS/Angular Material 表单有效性与 md-select

AngularJS/Angular Material form validity with md-select

javascript

angularjs

angular-material