как показать красный порядок, когда поле требуется в angularjs

Question

Не могли бы вы сказать мне, как показать красный порядок, когда поле требуется в angularjs. Я готовлю форму из json, в которой поле приходит "required": true . Так что эти поля требуется в моей форме. Теперь я хочу показать границу красного цвета, если пользователь не заполнил поля

вот мой код

 "First Name": {
    "value": "naveen",
    "type": "FIELD",
    "editable": true,
    "dataType": "",
     "required":true
  },
  "Last Name": {
    "value": "",
    "type": "FIELD",
    "editable": true,
    "dataType": "",
    "required":true
  }

Так что имя и фамилия требуются

/* Put your css in here */

.error {
  corder: 1px solid red;
}

Я хочу добавить этот класс в поле, если при нажатии кнопки произошла необходимая ошибка вот мой код http://plnkr.co/edit/19nvRM1ZBQqADhYk1XTR?p=preview

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

Answer 1

Поскольку вы уже используете элемент form, вы получите функции, предоставляемые директивой form, предоставляемой AngularJS. Это просто вопрос подключения проверки.

В частности, изменение HTML, необходимое для получения того, что вы хотите:

<div class="form-group" ng-class="{'has-error': myform[key].$invalid}">
    <input type="text" name="{{key}}" class="form-control" ng-model="value.value" ng-required="value.required">
</div>

Несколько пунктов с предложением здесь:

• Похоже, вы используете Bootstrap 3.3, и в этом случае среда уже предоставляет доступный стиль проверки состояния ошибки (т.е. обратите внимание на комбинацию form-group has-error). Нет необходимости определять отдельный класс CSS с красной рамкой, если вы действительно этого не хотите. Подробнее см. Здесь.
• Каждое поле ввода, требующее проверки, должно определять атрибут name
• Состояние проверки каждого поля ввода доступно через контроллер form (т.е. myform)

Вот раздвоенная версия вашего Plunker с приведенными выше предложениями.

Редактировать

В ответ на дальнейшие комментарии вам понадобятся изменения:

• Переместите кнопку отправки под элементом формы
• Применить novalidate к элементу формы для подавления проверки собственного браузера
• Расширение условия ng-class для включения свойств $touched и $submitted

Обновлена ​​вилка Plunker.