Skip to content

Client Validation

In this document, we'll see how to validate user input and display messages in case of error.

Simple screen validations

We can put the error messages in the screen.

First of all, we add a panel type form in the main panel with the tag causeValidation = true.

Validation1

We can add a simple form validation like this:

Validation2

  • lblLogin has the tag "forComponent=login".
  • login has the tags:
    • valMin = "4"
    • valMessage = "Login must be at least 4 characters long"
  • msgLogin has the tag "forId = login".

This generates the code:

Template.html:

  <div id="subContent">
    <form id="pnlForm" class="col-md-12"  #pnlForm="ngForm">
      <div id="pnlLoginRow" class="row" >
        <label id="lblLogin" #lblLogin for="login" class="col-md-2">Login</label>
        <div id="pnlLogin" class="col-md-3" >
          <input id="login" name="login" #login="ngModel" minlength="4"  class="form-control" type="text"
[(ngModel)]="appUser.login"/>
        </div>
        <span class="help-block" *ngIf="login.dirty && login.errors?.minlength">
Login must be at least 4 characters long
</span>
      </div>
    </form>
</div>

Result:

Validation3

We can add several errors messages:

Validation4

In this case, we replace the messageValidation control by the labels with the nestedPropertyVisibleProperty informed.

  • lblLogin has the tag "forComponent = login".

  • login has the tags:

    • valMax = "24"

    • valMin = "4"

    • valPattern = "[a-zA-Z]*"

    • valRequired = true

  • lblLoginRequired has the tags:

    • nestedPropertyVisibleProperty = "login.dirty && login.errors?.required"

    • text = "Login is required"

  • lblLoginMinlength has the tags:

    • nestedPropertyVisibleProperty = "login.dirty && login.errors?.minlength"

    • text = "Login must be at least 4 characters long"

  • lblLoginMaxlength has the tags:

    • nestedPropertyVisibleProperty = "login.dirty && login.errors?.maxlength"

    • text = "Login cannot be more than 24 characters long"

  • lblLoginPattern:

    • nestedPropertyVisibleProperty = "login.dirty && login.errors?.pattern"

    • text = "Login must be formed by alphabetic character only"

This diagram generates the code:

<div id="subContent">
  <form id="pnlForm" class="col-md-12"  #pnlForm="ngForm">
    <div id="pnlLoginRow" class="row" >
      <label id="lblLogin" #lblLogin for="login" class="col-md-1">Login</label>
      <div id="pnlLogin" class="col-md-3" >
        <input id="login" name="login" #login="ngModel" required="required"  minlength="4"  maxlength="24"
pattern="[a-zA-Z]*"  class="form-control" type="text" [(ngModel)]="appUser.login"/>
      </div>
      <div id="pnlMessages" class="col-md-6">
        <label id="lblLoginRequired" #lblLoginRequired *ngIf="login.dirty && login.errors?.required">
Login is required
</label>
        <label id="lblLoginMinlength" #lblLoginMinlength *ngIf="login.dirty && login.errors?.minlength">
Login must be at least 4 characters long
</label>
        <label id="lblLoginMaxlength" #lblLoginMaxlength *ngIf="login.dirty && login.errors?.maxlength">
Login cannot be more than 24 characters long
</label>
        <label id="lblLoginMaxlength" #lblLoginMaxlength *ngIf="login.dirty && login.errors?.pattern">
Login must be formed by alphabetic character only
</label>
      </div>
    </div>
  </form>
</div>

Result:

Validation5

Validations in the component

We can move the validation form screen to component.

For that, we add a property of type Object named pnlForm to the screen. And a formErrors property of type List with an initial value "{'login' : ''}".

Validation6

The property pnlForm has the same name as the screen panel of type form.

Validation7

Now, any tag for validation is present in the textbox.

  • lblLogin has the tag "forComponent = login".

  • login has not any tag for validation.

  • pnlMessages has the tag nestedPropertyVisibleProperty = "formErrors.login".

  • txtMessages has the tag nestedProperty = "formErrors.login".

We add a button btnSubmit and an event btnSubmitEventClick associates to it.