Проверка формы Angularjs с помощью шаблона ng

Я использую ng-шаблон для проверки поля и отображения сообщения, когда оно не соответствует определенному шаблону с использованием ng-сообщений. Проблема, с которой я столкнулся, заключается в том, что в форме есть кнопка «Далее», которая отключается/включается с помощью ng-diabled «form.$invalid», поэтому, когда ввод недействителен, форма становится недействительной.

Чего я хотел бы добиться, так это отобразить сообщение с ng-message, когда ng-шаблон не соответствует, но не установить недействительную форму. По сути, я пытаюсь дать подсказку, что текст, введенный пользователем, может быть недействительным, но не препятствовать отправке формы.


validation html angularjs ng-messages
person TPM LTD    schedule 23.04.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Насколько я понимаю, вы используете ng-disabled, это означает, что вы хотите отключить кнопку, когда форма недействительна, но для некоторых конкретных условий вы просто хотите показать сообщение об ошибке, но не сделать форму недействительной.

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

$scope.$watch('email', function() {
  if (email == '[email protected]') {
    flag = true;
  }
  else {
    flag = false;
  }
})

Обратите внимание, что это только для конкретного случая. Избегайте использования наблюдателей, это замедляет работу вашего приложения

person Shyam Tayal    schedule 23.04.2018
comment
Есть ли лучший способ сделать это? Вы поняли, что именно я хочу сделать. Это в основном и форма ввода адреса, где требуются определенные поля, и я хочу побудить пользователя ввести правильно отформатированный почтовый индекс, но не препятствовать отправке формы, поскольку сопоставление почтового индекса очень неоднозначно. - person TPM LTD; 23.04.2018
comment
Если вы хотите избежать watcher , используйте ng-change , хотя он также является наблюдателем, но имеет встроенный angular, поэтому потребление памяти будет меньше. - person Shyam Tayal; 23.04.2018

arrow_upward
0
arrow_downward

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

<input class="form-control" type="dacimal" name="percentage" ng-model="percentage" ng-min="0.01" ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" step="0.01" required>
<span class="alert-danger" ng-show="studentForm.$submitted || (studentForm.percentage.$dirty && studentForm.percentage.$invalid)">
  <span ng-show="studentForm.percentage.$error.required">Percentage is required !</span>
  <span ng-show="!studentForm.percentage.$valid">Invalid Percentage !</span>
</span>
person Vipul Solanki    schedule 23.04.2018
comment
Спасибо за комментарий, но на самом деле я пытался избежать поведения по умолчанию, чтобы предотвратить недействительность формы и просто показать предупреждение пользователю! Вид мягкой проверки, если хотите. В итоге я использовал предложение @Shyam выше и использовал ng-change с проверкой RegExp. - person TPM LTD; 26.04.2018