Как использовать подход формы angularjs при отображении сообщений об ошибках для поля ввода - PullRequest
Новая
       0

Как использовать подход формы angularjs при отображении сообщений об ошибках для поля ввода

0 голосов
/ 03 ноября 2019

enter image description here

Привет! Я ищу способ отображения сообщения об ошибке под полем ввода. Как мне это сделать? 

 <fieldset class="has-feedback form-group">  
  <div class="animated-label">
      <input type="text" name="Full Name" class="text-field"
             data-error="Error message"
             required="">
    <label>I can pay a down payment of</label>
    <sub><img src="/assets-new-site/media/Project/FAB/Common/images/svg/icn-error.svg"
        alt="error-icon"></sub>
    <div class="help-block with-errors"></div>
  </div>
</fieldset>

Пробовал с выше, но не может достичь метки и поля ввода в одной строке, и ошибка должна быть помечена только для поля ввода, а не для метки. AED должен быть предварительно заполненным входным значением.

1 Ответ

0 голосов
/ 04 ноября 2019

Если вы используете Bootstrap

См. Их документацию: https://getbootstrap.com/docs/4.3/components/forms/

Вы можете использовать этот тип шаблона 

<li ng-repeat="(key,value) in new_values" ng-show="new_values[key]['show']">
  <div class="form-group">
    <label for="{{'new_' + key}}"><strong>{{new_values[key]['text']}}</strong></label>
    <input placeholder="{{new_values[key]['placeholder']}}" class="{{'form-control ' + new_values[key]['valid']}}" aria-describedby="{{'new_' + key + '_help'}}" id="{{'new_' + key}}" type="text" ng-change="update_new(key)" ng-model="new_values[key]['value']" ng-disabled="new_values[key]['disabled']">
    <small id="{{'new_' + key + '_help'}}" class="form-text text-muted">{{new_values[key]['small']}}</small>
  </div>
</li>

У меня есть структура данных (объект), в котором хранятся все мои вопросы, так что я могу использовать ng-repeat в элементе списка, чтобы показать каждый вопрос, который я хочу, и сохранить его значение.

Небольшой тег будет отображаться, только если он имееттекст в нем (т.е. если моя структура данных имеет значение в свойстве ключа .small). Я думаю, что вы могли бы добавить свое сообщение об ошибке здесь? Вы также можете оформить его красным и т. Д.

Это будет выглядеть так: Контроль формы

...