Сообщение проверки правильности Angular Ionic 3 Form Builder - PullRequest
Новая
       21

Сообщение проверки правильности Angular Ionic 3 Form Builder

0 голосов
/ 30 августа 2018

Этот вопрос может быть продублирован, но я попытался поискать в Google правильный путь или решение этого вопроса. Так что вопрос очень прост, как сказано в заголовке. Как показать сообщения об ошибках валидации в Угловые 4 formBuilder, но в чистой структуре или в правильном порядке.

У меня был существующий код, который показывает ошибок проверки в форме, но жестко запрограммированно или в структуре с грязным кодом. Вот мой код ниже

HTML-файл 

 <ion-input #firstName class="input-cover" (tap)="focusToTopFields('firstName')" id="firstName" formControlName="firstName" type="text" placeholder="First Name *"
            [class.invalid]="form.controls['firstName'].errors && (form.controls['firstName'].dirty || form.controls['firstName'].touched)"
            [class.valid]="!form.controls['firstName'].errors && (form.controls['firstName'].dirty || form.controls['firstName'].touched)"></ion-input>

            <!-- Validation for First Name -->
            <div *ngIf="form.controls['firstName'].errors && (form.controls['firstName'].dirty || form.controls['firstName'].touched)">
              <small class="error-message" *ngIf="form.controls['firstName'].errors.required">
                First name is required.
              </small>
              <small class="error-message" *ngIf="form.controls['firstName'].errors.minlength">
                First name must be atleast 3 characters long.
              </small>
              <small class="error-message" *ngIf="form.controls['firstName'].errors.pattern">
                First name cannot accept numeric characters or special characters.
              </small>
            </div>

файл ts

Внутри группы formBuilder 

firstName: ["", Validators.compose([Validators.minLength(3), Validators.maxLength(40), Validators.pattern("[a-zA-Z ]*"), Validators.required])],

Теперь код еще можно понять, что происходит. Но представьте, как это будет выглядеть, если бы у меня была большая форма для заполнения огромного количества поля ввода. Это будет невозможно или станет беспорядком.

Да, я мог бы использовать некоторые компоненты для отображения сообщений об ошибках через Input decorator, но я все еще ищу способ не жестко закодировать все сообщения проверки в моем html-файле

Цените, если кто-то может помочь. Заранее спасибо.

1 Ответ

0 голосов
/ 30 августа 2018

Мы согласны с этим, когда мы добавляем сообщение проверки для любой реактивной формы, мы должны учитывать грязь и ошибки. Вы обрабатываете 3 обязательных проверки, minLength и pattern. Таким образом, у вас будет длинное Условие и каждое сообщение для конкретного валидатора.

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

<ion-input #firstName class="input-cover" (tap)="focusToTopFields('firstName')" id="firstName" formControlName="firstName" type="text" placeholder="First Name *"
            [class.invalid]="isFormFieldDirty('firstName')"
            [class.valid]="!isFormFieldDirty('firstName')"></ion-input>

            <!-- Validation for First Name -->
            <div *ngIf="isFormFieldDirty('firstName')">
              <small class="error-message" *ngIf="form.controls['firstName'].errors.required">
                First name is required.
              </small>
              <small class="error-message" *ngIf="form.controls['firstName'].errors.minlength">
                First name must be atleast 3 characters long.
              </small>
              <small class="error-message" *ngIf="form.controls['firstName'].errors.pattern">
                First name cannot accept numeric characters or special characters.
              </small>
            </div>

Компонент: 

isFormFieldDirty(fieldName: string){
     return this.formGroup.get('fieldName').errors && this.formGroup.get('fieldName').dirty && this.formGroup.get('fieldName').touched;
}
...