錯誤消息角表單驗證

後絲毫不掩飾這是我的形式我的HTML錯誤消息角表單驗證

 <form id = "myform" name="myform" ng-submit="saveForm()" novalidate > 

      <div class="input-group"> 
       <span class="input-group-addon"> <img src="/icon.png" alt=""/> </span>      
       <input type="text" class="form-control" id="username" name="username" ng-model="username" placeholder="Username" autofocus required>      
      </div> 
      <span ng-show="formInvalid">Please enter username</span> 


      <button type="submit" class="btn btn-default" id="saveBtn"> Save </button> 
     </form>

而且控制器內我有

$scope.formInvalid = false; 

$scope.saveForm = function(){ 
    if($scope.myform.username.$invalid){ 
     $scope.formInvalid = true; 
    } 

if($scope.myform.$valid){ 
//....save it....

起初形式沒有錯誤消息，如果我打「保存」出現「請輸入用戶名」，到目前爲止，都很好。

但是，如果我在表單字段單擊鍵入用戶名，該錯誤信息不會消失。即使我完成鍵入，點擊其他地方，錯誤信息仍然沒有消失。

我也嘗試

if(!$scope.myform.username.$valid){ 
     $scope.formInvalid = true; 
    }

，我也試着一起

if(!$scope.myform.username.$valid){ 
     $scope.formInvalid = true; 
    } 

    if($scope.myform.username.$valid){ 
     $scope.formInvalid = false; 
    }

，問題依然存在。我該如何調試？我該如何解決？

感謝

來源

2016-03-20 slevin

你可以嘗試手錶事件，

$scope.$watch('myform.$valid', function(n, o) { 
if(n) { 
$scope.formInvalid = false; 
} else { 
$scope.formInvalid = true; 
} 
});

但我甚至可能是一個更好的主意，如果你開始使用驗證。

來源

2016-03-20 21:51:28

你是什麼意思「驗證」？你可以給我一個例子嗎？感謝 – slevin

HTTP：//博客。thoughtram.io/angularjs/2015/01/11/exploring-angular-1.3-validators-pipeline.html –

你不會觸發改變的任何地方形成無效的屬性，我建議你解決這個問題，內置的驗證器和NG的消息模塊angulars，這將聽取你表單輸入的變化，並通知當輸入有效或無效並通知警告文本。你可以採取另一種方法是使用NG-變化指示您要根據投入的有效性，聽取他們對錶格無效屬性的變化，並觸發和更新的投入。

例如：（從官方角度網站被採取）

<form name="myForm"> 
    <label> 
    Enter your name: 
    <input type="text" 
      name="myName" 
      ng-model="name" 
      ng-minlength="5" 
      ng-maxlength="20" 
      required /> 
    </label> 
    <pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre> 

    <div ng-messages="myForm.myName.$error" style="color:maroon" role="alert"> 
    <div ng-message="required">You did not enter a field</div> 
    <div ng-message="minlength">Your field is too short</div> 
    <div ng-message="maxlength">Your field is too long</div> 
    </div> 
</form>

我認爲這是最優雅的方式來做到這一點。

來源

2016-03-20 21:55:41

你可以給我一個關於如何使用驗證器和'ng-messages'的例子嗎？謝謝 – slevin

我剛剛用一個例子編輯了我的原始答案，看看。 –

你不必引進和維護管理表單的狀態，一個新的變量（$scope.formInvalid）。 Angular會爲您維護表單的有效/無效狀態。

當你的窗體被命名爲myform，只顯示有關基於對myform.username.$invalid值用戶名的消息，並保存表單只有myform.$valid是真：

HTML

<span ng-show="myform.username.$invalid">Please enter username</span>

$scope.saveForm = function() { 
    if ($scope.myform.$valid) { 
    // save the form 
    } 
};

請參閱fiddle

來源

2016-03-20 22:18:50

阿哈，所以它非常簡單。兩件事情。 1-使用此方法，是否有辦法開始時根本沒有消息，並在字段爲空時顯示消息並點擊「保存」？我用'$ valid/$ invalid'混合了'ng-show/ng-hide'，但什麼也沒有。 2我在原始文章中使用的方法在「Beginning AngularJS」一書中，©2014 Andrew Grant，第6章。它如何不起作用？我的意思是，它在一本書中，它應該工作，對吧？謝謝 – slevin

1.當然。當您輸入時，即您提交表單時，即使表單無效，標誌'myform。$ submitted'也會設置爲true。所以像'ng-show =「myform。$ submit && myform.username。$ invalid」'應該可以做到這一點。 –

2.我不知道這本書，但如果引入變量formInvalid來顯示或隱藏驗證消息，那麼我認爲這不是一個好建議。基本上你提供的例子不起作用，因爲只要你開始在輸入中輸入，'formInvalid'沒有被設置爲false。 –

錯誤消息角表單驗證

回答

相關問題