angularJS избежать сообщения об ошибке, когда значение пусто

0

У меня есть аналогичный код, как показано ниже для регистрационной формы. В этом примере значение электронной почты предварительно загружается, поэтому ошибка не отображается. Но как я могу избежать ошибки, когда нет значения предварительной загрузки, другими словами, когда значение пустое:

$scope.Email = {valor:""};

Вот пример:

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Example - example-example59-production</title>


  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.1/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.1/angular-animate.js"></script>

</head>

<body ng-app="formExample">
  <script>
    angular.module('formExample', [])
      .controller('FormController', ['$scope',
        function($scope) {
          $scope.Email = {
            valor: "[email protected]"
          };
        }
      ]);
  </script>
  <style>
    .my-form {
      transition: all linear 0.5s;
      background: transparent;
    }
    .my-form.ng-invalid {
      background: red;
    }
  </style>
  <form name="myForm" ng-controller="FormController">
    Email:
    <input name="input" ng-model="Email.valor" required class="my-form">
    <span class="error" ng-show="myForm.input.$error.required">Required!</span>
    <br>
    <code>userType = {{Email.valor}}</code>
    <br>
    <code>myForm.input.$valid = {{myForm.input.$valid}}</code>
    <br>
    <code>myForm.input.$error = {{myForm.input.$error}}</code>
    <br>
    <code>myForm.$valid = {{myForm.$valid}}</code>
    <br>
    <code>myForm.$error.required = {{!!myForm.$error.required}}</code>
    <br>
  </form>
</body>

</html>
  • 0
    Вы намеренно проверяете электронную почту при загрузке страницы по какой-либо причине? Или это побочный эффект от того, как вы создали свой код?
  • 0
    О, я только что понял, что вы скопировали точный пример из документации ... Что вы пробовали, а что не сработало?
Теги:
angularjs-directive

2 ответа

1
Лучший ответ

Вы можете просто скрыть ошибку, если форма нетронутая (т.е. Вход еще не изменен). Что-то вроде:

<code ng-if='myForm.myControl.$dirty'>myForm.$error.required = {{!!myForm.$error.required}}</code><br>

Если это то, что вы ищете, там есть тема с более подробной информацией: Как сделать ngMessage для обязательных полей, только показывая, когда они грязные или отправляют форму?

Поделиться
1

Измените свой css Заменить этим

input.ng-invalid.ng-dirty {
      background-color: #FA787E;
    }

    input.ng-valid.ng-dirty {
      background-color: #78FA89;
    }

Вместо

.my-form {
      transition: all linear 0.5s;
      background: transparent;
    }
    .my-form.ng-invalid {
      background: red;
    }
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню