NG-無効

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'モデルが正しく読み込まれて表示されていても '保存'ボタンが無効になっていることです。結果をハードコードすると、すべて正常に動作します。 約束が返される前に、入力オプションを評価するための 'required'プロパティのように見えます。 非同期呼び出しの「必須」プロパティは、最初にオプションを選択した後にのみ評価されることもあります。

私の質問は、 '$ invalid' 'required'を 'md-select'要素に対して非同期に読み込まれるデフォルト値で使用する正しい方法です。

Answer 1

この問題には2つの解決策があります。角度のあるエキスパートが最初のものがなぜ機能するのか説明できる場合、私はうれしく思います。

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

：非同期検証の角度の例に従え は、私は、次のディレクティブを作成しました210

クライアントがグループ-必要はなく、必要な使用しています：

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

をそれが正常に動作しますが、複雑さが十倍です！