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

Ответ 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>

Ответ 2

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

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

Ответ 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>

Ответ 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, поэтому скрывает ваше сообщение об ошибке, пока вы не нажмете кнопку отправки.

Ответ 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>

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

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

Ответ 6

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

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

Ответ 7

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

<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 в сообщение, сгенерированное при возникновении ошибки, сообщение исчезает, когда пользователь исправляет ошибку. Спокойно. Я ЛЮБЛЮ angular.

Ответ 8

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

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

Ответ 9

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

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

Что это..

Работает как прелесть для меня.

Вот plunker

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

Ответ 10

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

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

Ответ 11

<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, и это будет работать.

Ответ 12

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

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

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

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