AngularJS：隱藏NG-消息，直到擊中形式提交按鈕

這是使用NG-消息的在AngularJS的典型例子（1.x中）：AngularJS：隱藏NG-消息，直到擊中形式提交按鈕

<form name="demoForm"> 
    <input name="amount" type="number" ng-model="amount" max="100" required> 

    <div ng-messages="demoForm.amount.$error"> 
    <div ng-message="required">This field is required</div> 
    </div> 

    <button type="submit">test submit</button> 
</form>

見：http://jsfiddle.net/11en8swy/3/

我現在想改變這個例子，所以只有當這個字段被觸摸（$touched）或用戶點擊提交按鈕時，纔會顯示「此字段是必需的」錯誤。

由於驗證錯誤阻止提交表單，因此我無法在表單上使用ng-submitted類。

我該怎麼做？

感謝

來源

2016-09-16 mvermand

您可以在init中，在您的控制器中將窗體設置爲'pristine'狀態，並在$ dirty上顯示ng-message。或者通過表單字段循環，將它們設置爲「pristine」這就是我在我的案例中解決它的方式。 – Kindzoku

可以使用ng-show做到這一點：

<div ng-messages="demoForm.amount.$error" ng-show="demoForm.amount.$touched"> 
    <div ng-message="required">This field is required</div> 
</div>

和使用自定義指令。看到工作演示：

var app = angular.module('app', ['ngMessages']); 
 

 
app.controller('mainCtrl', function($scope) { 
 

 
}); 
 
app.directive('hasFocus', function($timeout) { 
 
    return { 
 
    restrict: 'A', 
 
    require: 'ngModel', 
 
    link: function(scope, element, attr, ctrl) { 
 
     element.on('focus', function() { 
 
     $timeout(function() { 
 
      ctrl.hasFocusFoo = true; 
 
     }) 
 
     }); 
 

 
     element.on('blur', function() { 
 
     $timeout(function() { 
 
      ctrl.hasFocusFoo = false; 
 
     }) 
 
     }); 
 
    } 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-messages.js"></script> 
 

 
<body ng-app="app" ng-controller="mainCtrl"> 
 
    <form name="demoForm"> 
 
    <input name="amount" type="number" ng-model="amount" max="100" required has-focus> 
 

 
    <div ng-messages="demoForm.amount.$error" ng-show="demoForm.amount.$touched || demoForm.amount.hasFocusFoo"> 
 
     <div ng-message="required">This field is required</div> 
 
    </div> 
 

 
    <button type="submit">test submit</button> 
 
    </form> 
 
</body>

該指令基本上設置ngModel控制器上的另一個hasFocusFoo場那麼我們就可以方便地使用該指令。

來源

2016-09-16 06:00:36

我沒有得到你。當你只想顯示/隱藏焦點/模糊 –

時，'$ error'狀態如何處理？驗證是否將未觸摸的字段設置爲'$ touched'狀態？ – Kindzoku

當您從該字段失去焦點時，沒有設置「$ touched」狀態 –

啊，最後在PC上。

https://plnkr.co/edit/EX3UmoAOKmTKlameBXRa?p=preview

<form name="mc.form"> 
    <input type="text" name="empty" ng-model="mc.empty" required /> 
    <label ng-show="mc.form.empty.$dirty && mc.form.empty.$error.required">i'm empty</label> 
</form> 

MainController.$inject = ['$timeout']; 
function MainController($timeout) { 
    var vm = this; 

    $timeout(function(){ 
     vm.form.$setPristine(); 
    }); 

    vm.submit = function(){ 
     if(vm.form.$valid){ 
      alert('yay'); 
     }else{ 
      (vm.form.$error.required || []).forEach(function(f){ 
       f.$dirty = true; 
      }); 
     } 
    } 
}

這裏是我如何處理我的解決了這個任務。 $ setPristine（） - 將字段設置爲pristine狀態，所以字段不是$dirty，並且隱藏了錯誤。但是在提交之後，我手動在$dirty狀態中聲明必填字段，以便可以看到錯誤。 +如果您輸入了某個內容並在之後將其刪除，則無需提交表單即可看到該錯誤。

來源

2016-09-16 06:49:37 Kindzoku

這在每個表單上實現似乎都很複雜。如果我理解正確，您需要在每個字段和每個字段錯誤的最後一個分支中擴展檢查？ – mvermand

那麼，你只是通過'required'類型的錯誤循環，將em'設置爲'$ dirty'狀態。如果您在提交之前沒有觸碰過該字段，那只是一個例子。在我的解決方案中很實際我在這種情況下使用了一個指令，所以它是非常緊湊的解決方案。 – Kindzoku

我明白了，我關於遍歷所有領域的錯誤。關於指令：（如何）從控制器內部的控制器提交函數中注入代碼？你有代碼示例嗎？謝謝 – mvermand

AngularJS：隱藏NG-消息，直到擊中形式提交按鈕

回答

相關問題