ng 禁用不适用于 md-select 异步默认值

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'正确加载并显示了"保存"按钮时，"保存"按钮也将被禁用。如果我将结果进行编码，则一切正常。看起来"必需"属性会在返回承诺之前评估输入选项。我也读到，仅在首次选择选项后评估异步调用的"必需"属性。

所以我的问题是，使用" $ nive"的正确方法是什么，而默认值则是对'md-select'元素加载的默认值。

Answer 1

有两种解决方案，如果角度专家可以解释为什么第一个有效的方法，我会很高兴。

解决方案1：看起来只是更改数组的初始化方式足以满足"必需"选项。

请参阅' 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>

它的工作正常，但复杂性是十倍！