2017-03-08 67 views
0

我的指令可以添加一些屬性。其中一個屬性是「必需的」。角度材質在添加屬性時不會顯示錯誤信息

angular.module('MyApp',['ngMaterial', 'ngMessages']) 
    .controller('AppCtrl', function($scope) {}) 
    .directive("stPattern", ['$compile', stPattern]); 

function stPattern($compile) { 
    return { 
     restrict: 'A', 
     link: function ($scope, element, attrs, ngModel) { 
      $timeout(function() { 
       element 
        .attr("ng-pattern", /^123$/) 
        .attr("required", "required"); 

       element.removeAttr("st-pattern"); //because compile loop 

       $compile(element)($scope); 
      }, 2000); 
     } 
    }; 
} 

在我看來,我創建一個輸入形式的錯誤消息:

<form name="findForm"> 
    <md-input-container> 
     <label>CA ID</label> 
     <input type="text" name="findByCaId" 
       ng-model="findByCaId" 
       ng-focus="$event.target.select()" 
       st-pattern=""> 

     <div ng-messages="findForm.findByCaId.$error"> 
      <div ng-message="required">Campo obrigatório.</div> 
      <div ng-message="pattern">Valor inválido para o campo CA ID.</div> 
     </div> 
    </md-input-container> 
</form> 

當我運行應用程序,驗證情況良好,但消息沒有顯示! 當我使用devtools檢查瀏覽器上的呈現代碼時,我可以看到消息div創建良好。

我注意到,當出現消息的一些CSS屬性應用於消息:

style="opacity: 1; margin-top: 0px;" 

我注意到的另一件事是標籤這是應該有它的星號。

該行爲是否正確?是一個錯誤?

### UPDATE ###

我增加了$超時保持類似我的問題情景的代碼。

I create a fiddle to example.

謝謝!

+0

你可以創建一個plnkr或擺弄? – lin

+0

星號用於必填字段,只需在'input'中添加'required'屬性即可。 –

+0

您是否已將ngMessages添加到您的角度模塊? –

回答

1

在對form的子節點進行更改之後,您必須重新編譯form指令,而不是該元素。

所以不是$compile(element)($scope);使用$compile(element[0].form)($scope);

這裏工作codepen:http://codepen.io/anon/pen/XMMbGj?editors=1010

+0

這是偉大的Patryk!這對我有用!謝謝! 我只是覺得很有趣,現在具有所需屬性的字段顯示錯誤消息兩次... –