How to focus on control if it's value is not valid

[Pranav Patel]

Hi,

Sample Code: Sample Code

I have using Angular reactive form. In Sample code, on Save button click, I want to set focus on first invalid input. How to achieve this?

One more thing I want to ask that I found validationRule property in Grid control. Why this property is not available in Textbox and some other controls for validation?

Regards

[Sevvandhi Nagulan]

Hi Pranav, 

Greetings from Syncfusion support. 

Query 1: I have using Angular reactive form. In Sample code, on Save button click, I want to set focus on first invalid input. How to achieve this? 

Solution: 

We prepared the sample with the requirement “set focus on first invalid input” and attached the sample below. Refer to the code below, 

   if (this.SampleForm.invalid) {   

      for (const key of Object.keys(this.SampleForm.controls)) { 

      if (this.SampleForm.controls[key].invalid) { 

        const invalidControl = this.el.nativeElement.querySelector('[formcontrolname="' + key + '"]'); 

        invalidControl.ej2_instances[0].focusIn(); 

        break; 

     } 

    }       

    console.log('Form Error');  

      return; 

   } 

 

Sample link: https://stackblitz.com/edit/angular-moylfa-pef7zk?file=app.component.ts 

Query 2: One more thing I want to ask that I found validationRule property in Grid control. Why this property is not available in Textbox and some other controls for validation? 

Solution:  

We already have a FormValidator plugin to validate the form components like TextBox, DatePicker, NumericTextBox and MaskedTextBox etc. You can then add the rules and pass to the argument of the FormValidator component instance. Please refer to the UG documents below for more information. 

UG Link: https://ej2.syncfusion.com/angular/documentation/datepicker/how-to/custom-validation-using-form-validator/ 

Regards, 

Sevvandhi N 

[Rocky]

Hi,

My requirement is am having 3 text box,

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

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

Lowercase,uppercase,symbol,number

Once the requirements mets it should tick of on circle

It should present asterix when characters are entered on screen by 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