Angular Ionic 3 Form Builder validation message in a right way

This question may be duplicated but I tried googling for the right way or solution for this question. So the question is very simple as said in the title. How to show validation error messages in Angular 4 formBuilder but in the clean structure or proper way.

formBuilder

I had a existing code that show validation errors in the form but in a hardcoded way or a messy code stucture. Here is my code below

html file

<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 file

Inside the formBuilder group

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


Now the code still can be understand what is going on. But imagine how will this look like if I had a large form to fill in huge amount of input field. This will be unmaintainable or become a mess.

Yes I could use some components to display the error messages via Input decorator but I am still finding a way how to not hardcode all the validation messages in my html file

Input decorator

Appreciate if someone could help.
Thanks in advance.

1 Answer
1

We agree on this, when we add validation message for any reactive form, we need to consider dirty and errors. You are handling 3 validations required, minLength and pattern. So you will have lengthy Condition and each validator specific messsage.

On thing you can do this, move the validation condition logic to component and call from template.

<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>


Component:

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



Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.