2015-07-03 61 views
0

我想使用AngularJS創建自定義表單驗證。該表單應該有輸入和選擇元素。當任何輸入爲空或者都填入一些值時,表單應該是有效的。下面是這個視圖:

<form name="recipientsForm" novalidate> 
    <md-input-container> 
     <label>Name</label> 
     <input name="name" type="text" ng-model="relationship.name" value="" empty-or-both-filled="relationship.relationshipType"> 
     <div ng-messages="recipientsForm.name.$error"> 
      <div ng-message="emptyOrBothFilled">Enter name.</div> 
     </div> 
    </md-input-container> 
    <md-input-container> 
     <md-select name="type" placeholder="Select your relation... " ng-model="relationship.relationshipType" empty-or-both-filled="relationship.name"> 
      <md-option ng-repeat="type in relationshipTypes" value="{{type.relationshipType}}"> 
       {{type.name}} 
      </md-option> 
     </md-select> 
     <div ng-messages="recipientsForm.type.$error"> 
      <div ng-message="emptyOrBothFilled">Pick relationship.</div> 
     </div> 
    </md-input-container> 
</form> 

這裏是指令:

(function() { 
    'use strict'; 

    angular 
     .module('app') 
     .directive('emptyOrBothFilled', [emptyOrBothFilled]); 

    function emptyOrBothFilled() { 
     return { 
      restrict: 'A', 
      required: 'ngModel', 
      scope: { 
       targetNgModel: '=emptyOrBothFilled' 
      }, 
      link: function($scope, element, attrs, ngModel) { 
       ngModel.$validators.emptyOrBothFilled = function(val) { 
        var isValueEmpty = !val; 
        var isTargetEmpty = !$scope.targetNgModel; 

        return (isTargetEmpty && isValueEmpty) || (!isTargetEmpty && !isValueEmpty); 
       } 

       $scope.$watch('targetNgModel', function() { 
        ngModel.$validate(); 
       }) 
      } 
     } 
    } 
})(); 

提示,請,爲什麼我得到這個錯誤:

TypeError: Cannot read property '$validators' of undefined 
    at link (http://localhost:3000/app/shared/directives/EmptyOrBothFilled.js:17:24) 

回答

1

應該

require: 'ngModel', 

不是

required: 'ngModel', 

在指令說明中。

+0

男人,你很酷,謝謝! –

相關問題