All geek questions in one place

AngularJS: Hiding an ng message before clicking the submit form button

This is a typical example of using ng messages in AngularJS (1.x):

<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>

see http://jsfiddle.net/11en8swy/3/

Now I want to change this example so that the error "This field was required" is displayed only when the field ( $touched) is touched or the user clicks the submit button.

I cannot use the class ng-submittedon the form, because a validation error prevents the form from being submitted.

How should I do it?

thank

+4
source share
2 answers

You can do this using ng-show:

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

And use a custom directive. See a working demo:

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>
Run codeHide result

hasFocusFoo ngModel, .

+1

, , .

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, . +, - , .

0

Source: https://habr.com/ru/post/1654766/

More articles:


All Articles