2016-06-09 50 views
0

我使用AngularJS和角材料一個web應用程序,我建設,我有一個對話窗口下面的HTML表單:AngularJS /角物質形態的有效性同MD-選擇

<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是必需的且它是原始的,如用戶不修改選擇值,則表單被認爲是無效的。刪除選擇,只有與綁定模型的文本輸入,我沒有問題,表格被認爲是有效的。

我該如何解決這個問題,以什麼方式解決這個問題呢?

回答

0

嗯,我想出了我自己的想法,也許它會幫助其他人。

關鍵是在docs下的「選擇和對象相等」部分,我只是沒有注意到它,因爲它並不那麼明顯。

問題在於這樣的Javascript檢查平等的,如果我添加了NG-模式選項指示如下的方式被設定爲有效:

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