Подтверждение угловой формы при загрузке

Question

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

Я попытался добавить атрибут "novalidation" в форму, указанную в примерах на сайте AngularJS, но не повезло.

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

Update

Вот пример https://jsfiddle.net/davidshen84/00t197gx/

<div class="mdl-cell mdl-cell-6-col mdl-textfield mdl-js-textfield"> 
    <input class="mdl-textfield__input" type="text" id="screenname" pattern="[a-zA-Z0-9]{3,}" ng-model="comment.screenname" required/> 
    <label class="mdl-textfield__label" for="screenname">Screen Name</label> 
</div> 

При загрузке вы должны увидеть все поля ввода имели красную линию под ними, которые указывают, что они находятся в недействительных состоянии. И линия становится синей после проверки.

Примечание: Стиль на кнопку проверка не работает ... не должно быть проблемой в этой проблеме.

Answer 1

Что реализуется в настоящее время (неправильное ИМХО), что MDL автоматически проверяет ввод и не возражает против «NOVALIDATE» атрибут формы. Я должен был осуществить проверку на пустое значение входного сигнала (пропустить проверку и удалить это-неправильный класс) и, так как угловая форма проверки требует «NOVALIDATE» атрибут, проверьте:

if (input.form.novalidate = true) // skip validation

таким образом вы можете отключить лея валидация и оставить все угловым. На самом деле требуется еще одна вещь. Вы можете создать угловую директиву, которая проверяет выражение и добавляемый-инвалид класс, если это необходимо:

div class="mdl-textfield" mdl-validator="form.email.$error"

Answer 2

Угловой будет проверять форму одинаково в любой точке (нагрузка или позже) и отображать результат. Если вы не хотите отображать результаты при загрузке, добавьте логику, чтобы проверить, взаимодействует ли форма. Вы можете скрыть свои сообщения об ошибках с помощью ng-if="yourFormName.$dirty" или отобразить в соответствии с состоянием отдельного поля с yourFormName.yourFieldName.$dirty.

Click here for live demo.