Как сделать много сообщений об ошибках в реактивных формах?

Question

[Евгений Лубяной]

Разбираюсь с реактивными формами, во всех туториалах пишут что-то типа

<div class="alert alert-danger" 
        *ngIf="myForm.controls['userName'].invalid && myForm.controls['userName'].touched">
Не указано имя
</div>

Однако если мне требуется несколько разных правил валидации и, соответственно, несколько сообщений об ошибках, на каждое сообщение отдельный див?

Ожидалось флаг что валидация не прошла и массив всех сообщений или свойство с первым сообщением.
И разве нельзя поменять сообщение об ошибке у стандарного валидатора?

Интересует не только решение вопроса а разъяснение "философии", т.к. такое ощущение что я не понял чего-то принципиально важного

Answer 1

[Ivan Stroykin]

В общем 2 варианта, простой и сложный.
Простой вариант, на каждую ошибку свой блок:

<!-- validateTime - кастомная валидация -->
<div *ngIf="form.get('time').hasError('required')">...</div>
<div *ngIf="form.get('time').hasError('validateTime')">...</div>

Сложный вариант - компонент для ошибок. Нету времени писать пример, для примера можете посмотреть как работает компонент md-error в Angular Material Design. Только пишите все наименования ошибок в json-файле (удобно и легко сделать мультиязычным) и в зависимости от кода ошибки достаёте из json нужное сообщение.
Запомните, на Angular можно сделать всё, что можно сделать используя JavaScript

Comments

[Евгений Лубяной]

Примерно так и сделал, только для удобства пошел дальше и написал свои компоненты для ввода, используя ControlValueAccessor, где реализовал ошибки и повторяющуюся верстку

Answer 2

[ой всё]

хорошая идея про отдельное сообщение для каждого правила валидации
было бы еще лучше, если бы вы могли сделать валидацию отдельным "контроллером" потому что разные валидации могут требоваться при разных событиях, но ангуляру такие вещи вряд ли по плечу

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

Comments

[Евгений Лубяной]

т.е. это значит что ничего такого нет или что я что-то не так спросил?