К элементам формы применяется KbqValidateDirective, которая подменяет методы формы (Validators, onSubmit), что может привести к "непредсказуемому" поведению.
import { kbqDisableLegacyValidationDirectiveProvider } from '@koobiq/components/core';
@NgModule({
providers: [kbqDisableLegacyValidationDirectiveProvider()]
})
Фокус расположен в первом поле формы. Незаполненные поля не подсвечиваются красным с ошибкой. Исключением может быть сохраненный черновик с уже показанными ошибками, который открыли, чтобы продолжить заполнение.
Обязательные поля не отмечаются, если их в форме большинство. К дополнительным для заполнения полям можно добавить пометку или плейсхолдер «Необязательно». Еще лучше объяснить, чем поможет пользователю заполнение этой информации.
Некоторые поля можно не отмечать необязательными, если их дополнительная роль понятна. Например, «Описание».
Если в форме большинство полей необязательные, то редкие обязательные нужно пометить. Можно добавить красную звездочку после названия или серую пометку «Обязательно» под поле. В одной форме не используйте разные способы обозначения
Есть три способа проверки на ошибки:
Используется для проверки на допустимые символы. В момент ввода фильтруем недопустимый символ и показываем ошибку в тултипе около каретки ввода. Сообщение пропадает при вводе корректного символа или потере фокуса.
Если требования к значениям в поле относительно сложные (например, это IP-адрес или адрес эл. почты), то поле не должно получать состояние ошибки во время ввода, чтобы не сбивать пользователя с толку. Валидация в таких случаях выполняется по потере фокуса: поле оформляется невалидным и показывается сообщение об ошибке под ним.
Пустое поле при потере фокуса не валидируется.
Валидация при вводе работает в уже отмеченном ошибкой поле. Поле возвращается к нормальному состоянию после изменения значения, сообщение об ошибке пропадет.
Невалидное поле сохраняет оформление, если из него вышли, но ошибку не исправили.
По умолчанию ошибки показываются только для невалидных (некорректно заполненных) полей после взаимодействия пользователя.
Чтобы отображать ошибки сразу после отправки формы, используйте ShowOnFormSubmitErrorStateMatcher — реализацию ErrorStateMatcher.
Такая валидация используется для проверки пустых обязательных полей и тех, которые нельзя проверить на клиенте.
Кнопка отправки не блокируется в пустой форме или с невалидными полями. По клику на кнопку происходит валидация и отправка формы: кнопка принимает состояние Progress в момент отправки. Также в момент отправки поверх формы можно показать Loader Overlay.
При неудачной валидации фокус встает в первое поле с ошибкой. Если ошибка отправки не относится к конкретному полю, то показываем такое сообщение алертом над формой и ставим на него фокус. Так пользователь точно увидит алерт, даже если верхняя часть формы оказалась вне видимой области.
Если при повторной отправке формы ошибка не исправлена и сообщение в алерте по-прежнему актуально, то не надо скрывать и снова показывать его. Алерт должен плавно стать прозрачными и снова проявится, а фокус снова окажется на сообщении.
Сообщение об ошибке, которое относится к отдельному полю показываем под ним, но располагаем его перед текстом подсказки. Если сообщение об ошибке повторяет подсказку, то можно заменить одно другим.
Допустимо не писать текст ошибки о том, что необходимо заполнить обязательные поля, а лишь оформить их невалидными.
Общую для формы ошибку показываем алертом над первым полем и перемещаем фокус на сообщение. Алерт располагается выше, чем информационный блок, который часто располагается над полями.
В этом примере сообщение будет показано после нажатия по кнопку отправки. При управлении мышкой достаточно пролистать до алерта, а рамку фокуса показывать не надо. Если кнопка была активирована с клавиатуры, то показываем на алерте видимую рамку фокуса.
В некоторых формах требуется заполнить хотя бы одно из обязательных полей. В этом случае после отправки формы поля не оформляются невалидными. Сообщение об ошибке показывается алертом над формой. В нем можно перечислить невалидные поля и вставить псевдоссылки, которые будут перемещать фокус в соответствующий элемент управления.