在多個控制器內的選擇指令中公開自定義$錯誤

我有一個自定義選擇指令pets-select，用於多個視圖和控制器。但我不知道如何傳遞一個可選的required屬性並相應地驗證外部表單。

如何檢查使用的指令是否有required設置爲true並顯示一條錯誤消息，如果用戶不選擇它？

Plunkr https://plnkr.co/edit/gDGWq32kxDnAv6ZYyke4?p=preview

例如，在一個控制器/視圖被使用的myForm形式名稱的指令：

<!-- Main controller view --> 
    <div ng-controller="MainCtrl as mainCtrl"> 
     <form name="myForm" ng-submit="mainCtrl.submit(myForm.$valid)" novalidate> 
     <div class="form-group"> 
      <input ng-model="mainCtrl.data.name" type="text" name="name" placeholder="Name" required="required"> 
      <div class="error" ng-show="myForm.name.$invalid">Please enter a name.</div> 
     </div> 
     <div class="form-group"> 
      <input ng-model="mainCtrl.data.phone" type="tel" name="phone" placeholder="Phone number" required="required"> 
      <div class="error" ng-show="myForm.phone.$invalid">Please enter a phone number.</div> 
     </div> 

     <!-- Custom select directive (how do I validate?) --> 
     <div class="form-group"> 
      <pets-select ng-model="mainCtrl.data.pets" name="pets" label="Select pet" on-pet-change="mainCtrl.setPet(pet)" required="true"></pets-select> 
     </div> 

     <div class="form-group"> 
      <button type="submit">Submit</button> 
     </div> 
     </form> 
    </div>

用形式的另一控制器/視圖名稱anotherForm：

<!-- Another controller and view --> 
    <div ng-controller="AnotherCtrl as anotherCtrl"> 
     <form name="anotherForm" ng-submit="anotherCtrl.submit(anotherForm.$valid)" novalidate> 
     <div class="form-group"> 
      <input ng-model="anotherCtrl.data.email" type="email" name="email" placeholder="Email" required="required"> 
      <div class="error" ng-show="anotherForm.email.$invalid">Please enter an email.</div> 
     </div> 
     <div class="form-group"> 
      <input ng-model="anotherCtrl.data.address" type="text" name="address" placeholder="Address" required="required"> 
      <div class="error" ng-show="anotherForm.address.$invalid">Please enter an address.</div> 
     </div> 

     <!-- Custom select directive (how can i validate this?) --> 
     <div class="form-group"> 
      <pets-select ng-model="anotherCtrl.data.pets" name="pets" label="Select pet" on-pet-change="anotherCtrl.setPet(pet)" required="false"></pets-select> 
     </div> 

     <div class="form-group"> 
      <button type="submit">Submit</button> 
     </div> 
     </form> 
    </div>

該指令定義：

app.directive('petsSelect', function() { 
    return { 
    restrict: 'E', 
    replace: true, 
    transclude: true, 
    templateUrl: 'pets-select.html', 
    scope: { 
     pet: '=ngModel', 
     label: '@', 
     onPetChange: '&', 
     name: '@', 
     required: '=' 
    }, 
    link: function(scope, element, attrs) { 
     scope.pets = ['Cats', 'Dogs', 'Birds']; 
    } 
    }; 
});

該指令的模板：

<div class="select"> 
    <select ng-model="selectedPet" name="{{name}}" ng-change="onPetChange({pet: selectedPet})" class="form-control"> 
     <option value="" disabled="disabled">{{label}}</option> 
     <option ng-repeat="pet in pets" value="{{pet}}">{{pet}}</option> 
    </select> 

    <!-- How do I check whether the directive in use is required and show this error message if a user doesn't select it?? --> 
    <div ng-show="???">Please select a pet.</div> 

    </div>

來源

2016-01-21 cusejuice

我想你應該更喜歡ngMessages，在那裏你可以在現場級的錯誤信息補充。您可以配置自定義消息的是否爲required。您可以編寫自定義指令驗證和使用驗證輸入

Docs-ngMessages

Demo example-docs

附：目前，我無法爲你的闖入者工作，但上述資源將解決問題。

來源

2016-01-21 18:31:14

在多個控制器內的選擇指令中公開自定義$錯誤

回答

相關問題