Importance of Custom Validation In Angular 2

Angular Form Validation :

Angular 2 accomplish it simple to handle client-side form validations without much effort. In next sections we will look into some Angular form validation example.

Subsequent are some of the main angular2 form validation advantage applicabe for an input field.Form validation in Angular 2 is based on HTML validation attributes. HTML validation aspect are used in input elements. The required aspect defines that entering a value in the input field is mandatory.

Required

Calculate required field for html5 tag to an input field validates whether the field is empty or not. This insure that the field should have any value. The subsequent syntax is used for required with input field.

<div *ngIf="name.errors.required">
Name is required.
</div>

Maximum Length

The maximum length is worn to validate the maximum length of the input value. This will generate so that the length of the entered value is not more than the value show error message .

<div *ngIf = "password.hasError('minlength') && !password.hasError('required')" class = "alert alert-danger">
<span>Password should contain 7 characters</span>
</div>

Minimum Length

The minimum length is worn to validate the minimum length of the input value. This will generate so that length of the entered value not less than show the error message.

<div *ngIf = "password.hasError('minlength') && !password.hasError('required')" class = "alert alert-danger">

<span>Password should contain 5 characters</span>

</div>

Adding Validation Error Messages To The Form

In the later step going to add error messages in the emplateform . If a assured validation rule is not find these messages should be on display to the user.

<form>
<div class="form-group">
<label for="title">Title</label>
<input type="text" class="form-control" id="title" required minlength="5" maxlength="30" [(ngModel)]="model.title" name="title" #title="ngModel">
<div *ngIf="title.errors && (title.dirty || title.touched)" class="alert alert-danger">
<div [hidden]="!title.errors.required">
Book title is required!
</div>
<div [hidden]="!title.errors.minlength">
Title must be at least 5 characters long.
</div>
<div [hidden]="!title.errors.maxlength">
Title cannot be more than 30 characters long.
</div>
</div>
</div>
<div class="form-group">
<label for="url">URL</label>
<input type="text" class="form-control" id="url" required pattern="https?://.+" [(ngModel)]="model.url" name="url" #url="ngModel">
<div *ngIf="url.errors && (url.dirty || url.touched)" class="alert alert-danger">
<div [hidden]="!url.errors.required">
URL is required!
</div>
<div [hidden]="!url.errors.pattern">
Must be a valid URL!
</div>
</div>
</div>
<div>
<button type="submit" class="btn btn-default">Submit</button>
</div>
</form>

Display the error messages a html element is included for each one input element

<div *ngIf="title.errors && (title.dirty || title.touched)" class="alert alert-danger"> ... </div>

NgIf condition used to only act the fullfield of this element if the allow expression string is valid. The phrase come valid if the control is in an error state title.errors is true and at the like time the control is marked is dirty title.dirty is true or is marked as touched title.touch is true. This asure that error messages are not display normally. If the dirty banner is set the value of the input element has been changed by the user. If the touched banner is set to true the control has been visite by the user.

For any error message show another div block is place of the previously described block:

<div [hidden]="!title.errors.required">

Book title is required!

</div>