Подтвердить поле формы только для отправки или ввода пользователем

Question

У меня есть поля формы, которые проверяются с использованием required. Проблема в том, что ошибка отображается сразу после визуализации формы. Я хочу, чтобы он отображался только после ввода пользователем текстового поля или отправки.

Как это реализовать?

Answer 1

Используйте $dirty флаг, чтобы показать ошибку только после того, как пользователь взаимодействует с входом:

<div> 
    <input type="email" name="email" ng-model="user.email" required /> 
    <span ng-show="form.email.$dirty && form.email.$error.required">Email is required</span> 
</div> 

Если вы хотите, чтобы вызвать ошибки только после того, как пользователь представил форму, чем вы можете использовать отдельный переменный флаг как в:

<form ng-submit="submit()" name="form" ng-controller="MyCtrl"> 
    <div> 
    <input type="email" name="email" ng-model="user.email" required /> 
    <span ng-show="(form.email.$dirty || submitted) && form.email.$error.required"> 
     Email is required 
    </span> 
    </div> 

    <div> 
    <button type="submit">Submit</button> 
    </div> 
</form> 

function MyCtrl($scope){ 
    $scope.submit = function(){ 
    // Set the 'submitted' flag to true 
    $scope.submitted = true; 
    // Send the form to server 
    // $http.post ... 
    } 
}; 

Тогда, если все, что JS внутри ng-show выражение выглядит слишком много для вас, вы можете абстрагировать в отдельную мето d:

function MyCtrl($scope){ 
    $scope.submit = function(){ 
    // Set the 'submitted' flag to true 
    $scope.submitted = true; 
    // Send the form to server 
    // $http.post ... 
    } 

    $scope.hasError = function(field, validation){ 
    if(validation){ 
     return ($scope.form[field].$dirty && $scope.form[field].$error[validation]) || ($scope.submitted && $scope.form[field].$error[validation]); 
    } 
    return ($scope.form[field].$dirty && $scope.form[field].$invalid) || ($scope.submitted && $scope.form[field].$invalid); 
    }; 

}; 

<form ng-submit="submit()" name="form"> 
    <div> 
    <input type="email" name="email" ng-model="user.email" required /> 
    <span ng-show="hasError('email', 'required')">required</span> 
    </div> 

    <div> 
    <button type="submit">Submit</button> 
    </div> 
</form> 

Answer 2

Эрик Айгнер,

Пожалуйста, используйте $ загрязнен (поле было изменено) и $ недействительный (содержимое поля не действует).

Пожалуйста, проверьте ниже примеров для угловых форм проверки

1)

проверка Пример HTML для пользовательских входят входы:

<form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate> 
    <p>Email:<br> 
    <input type="email" name="email" ng-model="email" required> 
    <span ng-show="myForm.email.$dirty && myForm.email.$invalid"> 
     <span ng-show="myForm.email.$error.required">Email is required.</span> 
     <span ng-show="myForm.email.$error.email">Invalid email address.</span> 
     </span> 
    </p> 
    </form> 

2)

проверка Пример HTML/Js для пользователя отправляет:

 <form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate form-submit-validation=""> 
     <p>Email:<br> 
     <input type="email" name="email" ng-model="email" required> 
     <span ng-show="submitted || myForm.email.$dirty && myForm.email.$invalid"> 
      <span ng-show="myForm.email.$error.required">Email is required.</span> 
      <span ng-show="myForm.email.$error.email">Invalid email address.</span> 
      </span> 
     </p> 
<p> 
    <input type="submit"> 
</p> 
</form> 

Пользовательские Директива:

app.directive('formSubmitValidation', function() { 

     return { 
      require: 'form', 
      compile: function (tElem, tAttr) { 

       tElem.data('augmented', true); 

       return function (scope, elem, attr, form) { 
        elem.on('submit', function ($event) { 
         scope.$broadcast('form:submit', form); 

         if (!form.$valid) { 
          $event.preventDefault(); 
         } 
         scope.$apply(function() { 
          scope.submitted = true; 
         }); 


        }); 
       } 
      } 
     }; 


    }) 

3)

вы не хотите функцию использования использование директивы нг-изменения, как показано ниже

<form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate ng-change="submitFun()"> 
     <p>Email:<br> 
     <input type="email" name="email" ng-model="email" required> 
     <span ng-show="submitted || myForm.email.$dirty && myForm.email.$invalid"> 
      <span ng-show="myForm.email.$error.required">Email is required.</span> 
      <span ng-show="myForm.email.$error.email">Invalid email address.</span> 
      </span> 
     </p> 
<p> 
    <input type="submit"> 
</p> 
</form> 

контроллер SubmitFun() JS:

var app = angular.module('example', []); 
app.controller('exampleCntl', function($scope) { 
$scope.submitFun = function($event) { 
$scope.submitted = true; 
    if (!$scope.myForm.$valid) 
    { 
     $event.preventDefault(); 
    } 
    } 

});

Answer 3

Если вы хотите отображать сообщения об ошибках при отправке формы, вы можете использовать условие form.$submitted, чтобы проверить, была ли сделана попытка отправить форму. Проверьте следующий пример.

<form name="myForm" novalidate ng-submit="myForm.$valid && createUser()"> 
    <input type="text" name="name" ng-model="user.name" placeholder="Enter name of user" required> 
    <div ng-messages="myForm.name.$error" ng-if="myForm.$submitted"> 
    <div ng-message="required">Please enter user name.</div> 
    </div> 

    <input type="text" name="address" ng-model="user.address" placeholder="Enter Address" required ng-maxlength="30"> 
    <div ng-messages="myForm.name.$error" ng-if="myForm.$submitted"> 
    <div ng-message="required">Please enter user address.</div> 
    <div ng-message="maxlength">Should be less than 30 chars</div> 
    </div> 

    <button type="submit"> 
    Create user 
    </button> 
</form> 

Answer 4

Вы можете использовать состояние формы angularjs form.$submitted. Первоначально form.$submitted значение будет false и станет true после успешной формы отправить.

Answer 5

Вызов валидации на элементе формы могут быть обработаны путем запуска события изменения на этом элементе:

а) Exemple: изменение триггера на разнесенных элемента в виде

$scope.formName.elementName.$$element.change(); 

б) Exemple: изменение триггера события для каждого из элементов формы, например на нг-размещаете, нг-клик, нг-размытости ...

vm.triggerChangeForFormElements = function() { 
    // trigger change event for each of form elements 
    angular.forEach($scope.formName, function (element, name) { 
     if (!name.startsWith('$')) { 
      element.$$element.change(); 
     } 
    }); 
}; 

с) и еще один способ для этого

var handdleChange = function(form){ 
     var formFields = angular.element(form)[0].$$controls; 
     angular.forEach(formFields, function(field){ 
      field.$$element.change(); 
     }); 
    };