ng消息沒有正確顯示消息

我正在使用角度js進行驗證，並嘗試通過ng-message指令顯示錯誤消息。但我的問題是，在我的表單中，當我輸入任何錯誤輸入時，它不會在第一時間顯示消息，並且當我單擊窗體外部的任何地方，然後單擊它的顯示消息時。我還希望當錯誤被移除時，原始標籤應該出現。但是這裏一旦顯示錯誤信息，那麼標籤就不會出現在我的表單中。我使用下面的代碼爲validation-ng消息沒有正確顯示消息

<div class="form-group" ng-class="{ 'has-error' : myForm.num.$invalid && (myForm.$submitted || myForm.num.$touched) || myForm.num.$error.minlength || myForm.num.$error.maxlength || myForm.num.$error.pattern}"> 

    <label for="Number" style="color:#767676" class="" 
      ng-hide="myForm.num.$invalid && (myForm.$submitted || myForm.num.$touched || myForm.num.$error.minlength || myForm.num.$error.pattern)">Number</label> 

    <div ng-show="myForm.num.$touched " ng-messages="myForm.num.$error"> 
     <label class="error_message_text" ng-message="required">required field</label> 
     <label class="error_message_text" ng-message="minlength">too short</label> 
     <label class="error_message_text" ng-message="pattern">wrong pattern</label> 
    </div> 
    <br> 
    <input type="text" numbers-only name="num" class="form-control" ng-class="" ng-minlength="7" ng-maxlength="9" 
      ng-model="user.name" ng-pattern="/^\d{7}$|^\d{9}$/" required/> 

</div>

我創建了一個plunker這裏 - https://plnkr.co/edit/tYDdIs8ZhrdjSko68Wkh?p=preview

任何人都可以幫助我確認我丟失在哪裏？

來源

2016-07-25 Aanchal

你檢查我更新的答案和plnkr嗎？ –

@Aanchal查看已更新的plunkr –

@Aanchal再次更新我的答案......請檢查它。 –

使用既髒又錯誤有效，

<div ng-show="myForm.num.$invalid && myForm.$submitted" ng-messages="myForm.num.$error">

看到這個plunker，但我已刪除了該做的問題你的電話號碼驗證碼在所需的驗證期間 https://plnkr.co/edit/3m0zLJ2PhAruSFxStwmt?p=preview

更新的最終答案 - https://plnkr.co/edit/v65oGQaZ64nU25EhX2nz?p=preview

來源

2016-07-25 07:32:48

但是我的標籤正在消失，當我從我的箱子中取出標籤。之後，如果我在輸入內容後刪除了該值，則標籤不會出現。只要沒有錯誤信息，標籤就會出現什麼條件？ @ Shintu – Aanchal

給我一點時間 –

你有什麼我想要做的？檢查答案... –

這是因爲您已將ng-show="myForm.num.$touched "添加到您的錯誤消息容器中。當您從輸入字段中移除焦點時，$touched將成立。這就是爲什麼你在外部點擊後收到錯誤信息的原因。

來源

2016-07-25 06:57:51

很好，但是我應該給出什麼樣的條件，以便在錯誤消除時總是會出現標號「數字」。目前，當我甩掉標籤不出現@ Shashank – Aanchal

我不明白如果你不想在任何情況下隱藏標籤，爲什麼你在那裏添加'ng-hide'？有沒有具體的原因？ –

我只想在出現錯誤消息時才隱藏標籤。那麼我需要給予什麼條件？ – Aanchal

Update 2 Demo

使用$dirty而不是$touched。所以，你的代碼應該是這樣的：

<div ng-show="myForm.num.$dirty " ng-messages="myForm.num.$error">

更新

Number標籤應該是這樣的：

數

刪除，如果從numbersOnly指令的狀態。用下面的代碼

.directive('numbersOnly', function() { 
    return { 
     require: 'ngModel', 
     link: function (scope, element, attr, ngModelCtrl) { 
      function fromUser(text) { 

        var transformedInput = text.replace(/[^0-9]/g, ''); 

        if (transformedInput !== text) { 
         ngModelCtrl.$setViewValue(transformedInput); 
         ngModelCtrl.$render(); 
        } 
        return transformedInput; 

      }    
      ngModelCtrl.$parsers.push(fromUser); 
     } 
    };

顯示驗證消息：

<div ng-show="myForm.num.$dirty || myForm.$submitted" ng-messages="myForm.num.$error"> 
      <label class="error_message_text" ng-message="required">required field</label> 
      <label class="error_message_text" ng-message="minlength">too short</label> 
      <label class="error_message_text" ng-message="pattern">wrong pattern</label> 
</div>

來源

2016-07-25 07:03:37

現在錯誤是好的，但是當我得到錯誤後重新輸入正確的值，然後原始標籤沒有出現，我的意思是「數字」沒有顯示，一旦我選擇開箱即用。它缺少什麼條件？ – Aanchal

當文本框爲空時，它不顯示'required'消息。同樣，一旦我提交表單，然後再次標籤消失@Khalid – Aanchal

@Aanchal更新我的答案，請檢查它...也更新了plnkr。希望這能解決你的問題。 –

ng消息沒有正確顯示消息

回答

相關問題