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

Question

Я использую AngularJS 1.3.0 RC0 и angular-сообщения. ng-messages покорно показывает сообщения об ошибках для тех "обязательных" полей, когда форма изначально загружена и является нетронутой. Таким образом, вновь загруженная страница формы заполняется сообщениями об ошибках. Это не то, что я хочу. Как сделать так, чтобы ngMessage для обязательных полей показывалось только тогда, когда эти поля грязные или отправляют форму?

Я прочитал официальный документ, без понятия. И попытался положить "ng-show =" fieldName. $ Dirty "" в div ng-messages, не сработало. Любая помощь будет высоко оценен!

Answer 1

Использовать ng-if атрибут для проверки $dirty на теге, который имеет ng-messages,

Пример:

<div ng-messages='myForm.myControl.$error' ng-if='myForm.myControl.$dirty'>
    <div ng-message='required'>Required field</div>
</div>

Answer 2

Лучший способ сделать это с помощью $touch:

<div class="help-block" ng-messages="userForm.name.$error" ng-show="userForm.name.$touched">
    ...
</div>

Answer 3

Только если грязный

<div ng-messages="myForm.myField.$dirty && myForm.myField.$error">
    <div ng-message='required'>Required field</div>
</div>

Только если форма отправлена:

<div ng-messages="myForm.$submitted && myForm.myField.$error">
    <div ng-message='required'>Required field</div>
</div>

Answer 4

Вместо использования предложенного ng-if вы можете сделать что-то вроде...

<div ng-messages='myForm.myControl.$error' ng-if='submitted'>
   <div ng-message='required'>Required field</div>
</div>

И на кнопку отправки добавить:

ng-click="submitted=true"

Возможно, вы захотите изменить значение $scope.submitted на false при повторном вводе, чтобы добавить это к своему текстовому / электронному вводу:

ng-keyup="submitted=false"

Таким образом, только кнопка отправки изменит значение $scope.submitted на true, а все остальное, что вы сделаете, установит значение false, поэтому ваше сообщение об ошибке будет скрыто, пока вы не нажмете кнопку подтверждения.

Answer 5

Я не хотел показывать свое сообщение, пока не возникнет какая-либо ошибка или пользователь не попытается отправить страницу, и ни одно из вышеуказанных решений не сработало.

Наконец я успешно закончил с этим:

<form name='frmUser'>
..........
..........
<div ng-messages="frmUser.firstName.$error" 
     ng-show='frmUser.$submitted || frmUser.firstName.$dirty' role="alert">
      <div ng-message="required" class="err">Required</div>
      <div ng-message="maxlength" class="err">Maximum 50 characters.</div>
</div>
<input ng-model="model.first"
       name="firstName"
       type="text"
       ng-required="true"
       ng-maxlength="50"
       placeholder="Enter your first name" />

</form>

Если вы введете что-то, что не является допустимым, то покажите ошибку

Если вы попытаетесь отправить страницу и не указали обязательное поле, появится сообщение об ошибке.

Answer 6

Сообщения об ошибках все еще появляются после того, как вы выполнили их условия? В этом случае, вы помнили взять зависимость от ngMessages в вашем угловом модуле? Например:

angular.module("exampleModule", ["ngMessages"]);

Answer 7

Просто попробуйте это

<div ng-messages='myForm.fieldName.$error && (myForm.fieldName.$dirty || myForm.$submitted)' >
    <div ng-message='required'>Required field</div>
</div>

Answer 8

Я нашел этот ответ полезным, но он не решил проблему сообщения об ошибке, нависшего навсегда. Я придумал немного более сложное использование show and hide следующим образом:

<div class="help-block"
    ng-messages="addPlanForm.planName.$error"
    ng-show="addPlanForm.$submitted || addPlanForm.planName.$dirty || (addPlanForm.planName.$invalid && addPlanForm.planName.$touched)">
    <p ng-message="required" ng-hide="addPlanForm.planName.$valid">Your name is required.</p>
</div>

При добавлении ng-hide к сообщению, сгенерированному при возникновении ошибки, сообщение исчезает, когда пользователь исправляет ошибку. Круто. Я люблю угловой.

Answer 9

<input required type="text" ng-model="model" name="field" ng-maxlength="13" ng-minlength="10">     
<div ng-messages="form.field.$error" ng-if='form.$submitted'>
            <p ng-message="required">Required</p>
            <p ng-message="maxlength">not a valid field. Length exceeds.</p>
            <p ng-message="minlength">not a valid field. Length is shorter.</p>
</div>

тип кнопки должен быть submit и это будет работать.

Answer 10

Я решил эту проблему с помощью правила CSS

[ng-messages] { display: none; color:red; } 
.ng-dirty [ng-messages] { display:block }

Это оно..

Работает как шарм для меня.

Вот плункер

Angular использует классы, вы можете сделать с ним так много всего!

Answer 11

Я боролся с этим, и происходило то, что мои ng-сообщения не появлялись, потому что поведение браузера по умолчанию не разрешало неверную отправку формы с ng-required="true". Чтобы решить эту проблему, вы можете украсить форму с novalidate. Вот полный рабочий пример для меня:

<form name="myForm" novalidate ng-submit="myForm.$valid && controllSideSubmitHandle()">
  <input type="text" name="name" ng-model="myScope.name" ng-required="true">
  <div ng-messages="myForm.$error || myForm.$submitted" style="color:maroon" role="alert" ng-if="myForm.name.$dirty || myForm.$submitted">
    <div ng-message="required">Name is required.</div>
  </div>
  <input type="submit" value="Submit"/>
</form>

Answer 12

Если вы используете AngularJS Material, многие из этих функций выходят из коробки! Просто не забудьте положить все внутри <md-input-container>,

Вот пример кода, чтобы вы могли увидеть, как он выглядит. Это не только скрывает ошибку до нажатия на вход, но и добавляет приятный красный стиль и анимацию, когда он появляется!

Вот фактический код:

  <form name="books" novalidate>
    <md-input-container>
      <input ng-model="title" name="title" required/>
      <div ng-messages="books.title.$error">
        <div ng-message="required">Title is required</div>
      </div>
    </md-input-container>
  </form>