NG-禁用不與MD-選擇異步默認值工作

Question

我有以下形式：

<form name="editUserForm" ng-cloak=""> 
 
<md-input-container layout-margin> 
 
     <label>Available Groups</label> 
 
     <md-select id="groups" ng-model="vm.selectedGroup" ng-model-options="{ trackBy: '$value.id' }" md-on-close="vm.clearGroupSearchTerm()" 
 
      data-md-container-class="selectdemoSelectHeader" multiple required> 
 
      <md-select-header class="demo-select-header"> 
 
      <input id="searchGroup" ng-model="vm.groupSearchTerm" type="search" placeholder="Search available groups" class="demo-header-searchbox md-text" 
 
      ng-keydown="$event.stopPropagation()"> 
 
      </md-select-header> 
 
      <md-optgroup label="Groups"> 
 
      <md-option ng-value="group" ng-repeat="group in vm.groups |filter:vm.groupSearchTerm">{{group.name}}</md-option> 
 
      </md-optgroup> 
 
     </md-select> 
 
     </md-input-container> 
 

 
     <div layout="row" layout-align="end"> 
 
     <md-button id="buttonCancel" class="md-raised md-primary" ui-sref="search.users" type="submit">Cancel</md-button> 
 
     <md-button id="buttonSave" class="md-raised md-primary" ng-disabled="editUserForm.$invalid" ng-click="vm.addOrUpdateUser()" 
 
      type="submit">Save</md-button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</form>

選擇默認選項框異步加載：

/* @ngInject */ 
 
    function UserController($scope, $state, $stateParams, $element, 
 
    usersService, groupsService, groupNameRegex, logger) { 
 
    var vm = this; 
 
    editUser() 
 
    function editUser() { 
 
     usersService.getUser($stateParams.userId). 
 
     then(function (data) { 
 
      vm.user = data; 
 
      for (var i = 0; i < data.userGroups.length; i++) { 
 
      vm.selectedGroup.push(data.userGroups[i].group); 
 
      } 
 
      // vm.selectedGroup = [{ id: 101, name: 'group1' }]; 
 
     }); 
 
    } 
 
... 

問題是當表單呈現時，即使模型「vm.selectedGroup」被正確加載並顯示，'Save'按鈕也被禁用。如果我硬編碼的結果，一切工作正常。 看起來'必需'屬性在返回承諾之前評估輸入選項。 我也讀過，異步調用的'required'屬性只在第一次選擇一個選項後才被評估。

所以我的問題是什麼是正確的方式來使用'$無效''所需'與默認值異步加載'md-select'元素。

Answer 1

這個問題有兩種解決方案，如果一個角度專家可以解釋第一個問題的原因，我會很高興。

解決方案1： 看起來只是改變數組初始化的方式足以滿足'required'選項。

參見'vm.selectedGroup = null;'和'vm.selectedGroup = [];'

/* @ngInject */ 
 
    function UserController($scope, $state, $stateParams, $element, 
 
    usersService, groupsService, groupNameRegex, logger) { 
 
    var vm = this; 
 
    
 
    vm.selectedGroup = null; 
 
    
 
    function editUser() { 
 
     getUserGroups(vm.customerId); 
 
     usersService.getUser($stateParams.userId). 
 
     then(function (data) { 
 
      vm.user = data; 
 
      vm.selectedGroup = []; 
 
      for (var i = 0; i < data.userGroups.length; i++) { 
 
      vm.selectedGroup.push(data.userGroups[i].group); 
 
      } 
 
      vm.selectedStatus = { code: data.enabled, name: '' }; 
 
      vm.selectedRole = data.authority; 
 
     }); 
 
    }

解決方案2： 以下有關異步驗證角例如，我創建了下面的指令：

(function() { 
 
    'use strict'; 
 

 
    angular 
 
    .module('app.groups') 
 
    .directive('groupRequired', groupRequired); 
 

 
    /* @ngInject */ 
 
    function groupRequired(usersService, $stateParams, $q) { 
 
    return { 
 
     require: 'ngModel', 
 

 
     link: function (scope, element, attributes, ngModel) { 
 
     ngModel.$asyncValidators.groupRequired = function (modelValue, viewValue) { 
 
      var selectedGroup = scope.vm.selectedGroup; 
 
      var def = $q.defer(); 
 
      if (modelValue.length === 0 && selectedGroup.length === 0) { 
 
      return usersService.getUser($stateParams.userId). 
 
       then(function (data) { 
 
       if (data.userGroups.length > 0) { 
 
        ngModel.$setValidity('async', true); 
 
       } else { 
 
        ngModel.$setValidity('async', false); 
 
       } 
 
       }); 
 
      } else { 
 
      if (modelValue.length > 0) { 
 
       ngModel.$setValidity('async', true); 
 
      } else { 
 
       ngModel.$setValidity('async', false); 
 
      } 
 
      return $q.resolve(); 
 
      } 
 
     }; 
 
     } 
 
    }; 
 
    } 
 
}());

客戶端使用組要求的，而不是必需的：

<form name="editUserForm" ng-cloak=""> 
 
<md-input-container layout-margin> 
 
     <label>Available Groups</label> 
 
     <md-select id="groups" ng-model="vm.selectedGroup" ng-model-options="{ trackBy: '$value.id' }" md-on-close="vm.clearGroupSearchTerm()" 
 
      data-md-container-class="selectdemoSelectHeader" multiple group-required>

它工作正常，但複雜性是十倍！