Validation ejs-textbox

[Tim Hartog]

Hi,

I am refactoring a component with mat-form-fields into ejs-textbox fields.

I have a problem with getting the form validation behaviour i had with material with the ejs-textbox field.

When i am entering the form i want to highlight the placeholders of the required textbox fields in red.

When the fields are valid i want show the 'normal' state (placeholder color black).

On the forum i saw a possible solution, but this does not work in my case.

html:

  floatLabelType="Always"
  formControlName="scReportedBy"
  placeholder="reportedBy"
  [class.e-error]="getClass('scReportedBy')">

ts file:

public getClass(valid) {
  if (this.servicecallForm.controls[valid].valid) {
    return false;
  } else {
    return true;
  }
}

In the form definitionscReportedBy has validator required.

The routine is giving the right value back, but the field in the HTML file does not change.

Is there something i am missing, or is there another way of getting this behaviour?

Kind regards,

Bob Fiering

[Sevvandhi Nagulan]

Hi Bob, 

We are currently validating the reported requirement at our end. We will update further details on April 28^th,2021. We appreciate your patience until then. 

Regards, 

Sevvandhi N 

[Tim Hartog]

Thank you Sevvandhi.

regards,

Bob

[Sevvandhi Nagulan]

Hello Bob, 

Thanks for your patience. 

We checked your query of “Changing the color of float label text”. We can change the default color of the float element by overriding the below selector. Kindly refer the following code. 

.e-float-input.e-control-wrapper:not(.e-error) input:valid ~ label.e-float-text, .e-float-input.e-control-wrapper:not(.e-error) input ~ label.e-label-top.e-float-text { 

  color:red; 

} 

 

Please find the sample below. 

 

Sample link: https://stackblitz.com/edit/angular-u3ni8z-kmhrsb?file=app.component.css 

Kindly get back to us for further assistance. 

Regards, 

Sevvandhi N 

[Tim Hartog]

Hello Sevvandhi,

I wil try your given solution.

Thank you for your help.

Regards,

Bob

[Sevvandhi Nagulan]

Hi Bob, 

Thanks for your update. We will wait until we hear back from you. 

Regards, 

Sevvandhi N 

[Rocky]

Hi,

My requirement is am having 3 ejs text box,

Current password, new password and confirm password need to apply validation for the ejs textboxes

Validation rules minimum 8 characters max 50 characters, contains 3 out of 4 types of characters:

These below regex needs to display individually when requirements mets its should tick on circle

Lowercase,uppercase,symbol,number

Once the requirements mets it should tick of on circle

It should present asterix when characters are entered on screen and eye button in ejs textbox and when toggling its show password to see actual password I want solution in angular syncfusion cross field custom validation using angular reactive form with ejs text box . need to display validation error on ejs text box

[Mohanraj Mathaiyan]

Hi Rocky,

As per your requirement we are prepared the sample. In that we have validated as per requirement like Validation rules minimum 8 characters max 50 characters, contains 3 out of 4 types of characters: Lowercase, uppercase, symbol, number. Once the requirements meet tick of on circle and when toggling its show password to see actual password. We have attached the sample for your reference.

<div class="form-group template">

<div class="e-float-input" [ngClass]="{ 'e-success': username.valid }">

        <ejs-textbox floatLabelType="Auto"

                     type="password"

                     #default

                     id="current_password"

                     name="username"

                     placeholder="Enter your Password"

                     floatLabelType="Auto"

                     [(ngModel)]="UserDetails.username"

                     #username="ngModel"

                     minlength="8"

                     maxlength="50"

                     required

                     pattern="^((?=.*?[A-Z])(?=.*?[a-z])(?=.*?\d)|(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[^a-zA-Z0-9])|(?=.*?[A-Z])(?=.*?\d)(?=.*?[^a-zA-Z0-9])|(?=.*?[a-z])(?=.*?\d)(?=.*?[^a-zA-Z0-9])).{8,}$"></ejs-textbox>

<!-- <span class="e-icons e-eye"></span> -->

        <span class="e-float-line"></span>

        <label class="e-float-text"

               [ngClass]="{

              'e-label-top': UserDetails.username !== '',

              'e-label-bottom': UserDetails.username == ''

            }"

               for="name"></label>

</div>

<span class="e-success"

          id="icon"

          *ngIf="username.valid"

          class="e-icons e-circle-check"></span>

<span class="e-error"

          *ngIf="

      username.errors &&

      username.errors.required &&

        (username.dirty || username.touched)

      ">

        * Enter current Password

</span>

<span class="e-error"

          *ngIf="

      username.errors &&

      username.errors.pattern &&

        (username.dirty || username.touched)

      ">

        * Enter a valid current password

</span>

Sample : https://stackblitz.com/edit/angular-btmnax-vgihnh?file=app.component.ts

Regards,

Mohanraj M

[Rocky]

Hi mohan , thank u actually my requirement is using angular reactive form I have mentioned it in previous query . I need solution using angular reactive form cross field custom validation

[Vinitha Jeyakumar]

Hi Rocky,

Currently, we are validating your reported query. we will update you the further details in two business days on or before 11th May 2022.

Regards,

Vinitha

[Rocky]

Hi Vinitha,

Thank you for your response , am waiting for the same , and that eye icon should be slash eye icon when we click that eye icon its should slash, and the characters are entered on screen as asterisks , not dotted .

[Vinitha Jeyakumar]

Hi Rocky,

We have modified the sample as per your requirement to validate the inputs using angular reactive forms along with your specified validation rules. please check the sample below,

Sample: https://stackblitz.com/edit/angular-sxqser-rzygme?file=app.component.html,app.component.ts

Regards,

Vinitha

[Rocky]

Hi vinitha ,

Thanks for your update, actually my requirements is I want this whole solutions using angular reactive form using ejs textbox cross field validation .. Not using template driven

[Vinitha Jeyakumar]

Hi Rocky,

Now we have created a sample using ejs-textbox with cross field validation in angular reactive forms. please check the sample below,

Sample: https://stackblitz.com/edit/angular-btmnax-qjalkd?file=app.component.html

Regards,

Vinitha