Проверка запуска Angular2 по умолчанию

Я использую FormBuilder и имею простую проверку, которая проверяет, действительно ли поле с помощью *ngIf="!field.valid

<input [ngFormControl]="myForm.controls['field']"
       type="text" id="field"  #field="ngForm">
<span class="error" *ngIf="!field.valid">Error</span>

Всегда, когда компоненты загружаются, errors отображаются еще до того, как я что-либо ввожу в какие-либо входные данные. Как остановить Angular 2 для запуска проверки при загрузке компонента, чтобы он срабатывал только при наборе текста?


angular validation angular2-forms
person sreginogemoh    schedule 06.04.2016    source источник

Ответы (2)


arrow_upward
2
arrow_downward

В основном существует три типа класса ошибок для ввода формы,

  • грязный - когда значение элемента управления изменилось

  • коснулся - когда элемент управления был посещен

  • действительный - когда значение элемента управления действительно (в соответствии с предоставленной проверкой)

поэтому в соответствии с вашими требованиями вам нужно использовать класс dirty or touched из числа классов, вы можете использовать [hidden] as well as *ngIf для использования этого класса ошибок (чтобы показать сообщение об ошибке). вы можете использовать так:

<span [hidden]="name.valid" *ngIf='name.touched'><b>Required</b></span>

см. рабочий пример формы с использованием классов ошибок.

для получения дополнительной информации, связанной с классами ошибок, см. здесь

person Pardeep Jain    schedule 06.04.2016
comment
Когда вы отправите форму, вы хотите, чтобы все поля, которые недействительны, но нетронуты, теперь отображали сообщения об ошибках. Как бы Вы это сделали? - person The Muffin Man; 17.09.2017
comment
this.myForm.markAsTouched(); if (this.myForm.valid) {// ваш код} else {// отображать пользовательские ошибки} - person Mohammad Sharaf Ali; 27.02.2018

arrow_upward
1
arrow_downward

Включите проверку, если поле touched или dirty

<span class="error" *ngIf="!field.valid && field.dirty">Error</span>
person Günter Zöchbauer    schedule 06.04.2016