Dialog on change

[vin]

I need to show a dialog when data entered is more than certain limit.

But when data is binding, the dialog is showing up because change event is firing!!

What is a good way to show dialog, need example please. And dialog shd only show when it meets cerrtain condition 

 <ejs-numerictextbox  name="hours_planned"

                                                id="hours_planned" placeholder="Enter Hours Planned" required

                                                #hours_planned="ngModel" [(ngModel)]="hrsPlanned" title="Hours Planned"

                                                format='n'  min='0' (change)="validateHrsPlanned($event)"   

                                                ></ejs-numerictextbox>

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hi Vin, 

Thanks for contacting Syncfusion support.

We would like to know you that when the value of the Numeric Textbox changes, change event will trigger on focus out the control. In that event, we can show the dialog by checking the changed value against the condition.


 

public onChange(args) { 

    if (args.value> 10){ 

      this.dialog.show() 

    } 

  } 

 

We have made sample for your convenience. Please find the sample in the below link;

Sample Link: https://stackblitz.com/edit/angular-dialog-show-on-matched-criteria-numeric-textbox 

Screenshot:

 

 

 

Kindly check the sample and get back to us if you need further assistance on this.

Regards, 

Jeyanth.

 

[vin]

Looks like the issue is happening when i use  [(ngModel)]
can you pls update ur example with ngmodel

 <label for="hours_planned" class="labels"

                        [ngClass]="{'e-error ts-bold': ( (newProgram.submitted && !hours_planned.valid ) || (hours_planned.dirty || hours_planned.touched) && !hours_planned.valid) }">

                        Hours Planned <h5 class="font-sm">(max - {{maxHrsPlanned}})</h5>

                    </label>

 

<ejs-numerictextbox  name="hours_planned" id="hours_planned"

                        placeholder="Enter Hours Planned" required #hours_planned="ngModel" [(ngModel)]="hrsPlanned"

                        title="Hours Planned" 

                        format='n'  min='0' (change)="validateHrsPlanned($event)"  

                        ></ejs-numerictextbox>

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hi Vin, 

Thanks for your update. 

Based on the provided information in the code snippet, we suspect that you have used Numeric Textbox inside the form. Therefore, we made a sample inside a form with ngModel bound. Please find the sample below.

Sample Link       : https://stackblitz.com/edit/numeric-textbox-dialog-validation 

Also we would like to know you that you can also show the dialog with the help of ngIf with the condition as ngModel value. 

 

<div class="form-group" style="padding-top:10px;"> 

   <div>                 

     <ejs-numerictextbox name="skillcount" required #bookcount='ngModel'  

      [(ngModel)]='count'floatLabelType="Auto" [placeholder]="countplaceholder" > 

     </ejs-numerictextbox>   

   </div>                               

   <div *ngIf="bookcount.value > 10">   

   

      <ejs-dialog #dialog id='dialog' #dialog [visible]="true"  

      [showCloseIcon]="true" [target]='body'content="Value greater than 10"  

      header="Alert" width='250px'> 

      </ejs-dialog>     

   </div> 

                                 

</div> 

Kindly check the sample and get back to us if you need any further assistance on this. 

Regards, 

Jeyanth.