We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to include form in dialog which is having its header(<ng-template #header></ng-template) ,content(<ng-template #content></ng-template) and footer(<ng-template #footerTemplate></ng-template) with

Thread ID:





143203 Mar 8,2019 04:03 PM UTC Apr 5,2019 11:07 AM UTC Angular - EJ 2 3
Tags: Dialog
Asked On March 8, 2019 04:03 PM UTC

     I am using dialog for a form with validations like below example.  How to include form tag (<form></form>).

Why form tag:
Ans:It will automatically trigger form validations by clicking save changes button.
     <ejs-dialog #Dialog>
    <ng-template #header>
      Header content....
    <ng-template #content>
                  <ejs-textbox  [(ngModel)]="Name">

      doing its validation......
    <ng-template #footerTemplate>
              <button ejs-button>Cancel</button>
              <button ejs-button >
                Save Changes


Prince Oliver [Syncfusion]
Replied On March 11, 2019 11:58 AM UTC

Hi Goutham,  

Thank you for contacting Syncfusion support. 

Based on your requirement, we have prepared Dialog sample with template driven form support. The form validation is will be shown when you clear the text and click the Submit button in the Dialog footer. You can simply render the Dialog component inside the form element, kindly refer to the following code snippet. 

<form #form="ngForm"> 
    <div class="form-group"> 
        <ejs-dialog #template> 
            <ng-template #header> 
            <ng-template #content> 
                <ejs-autocomplete name="skillname" #value='ngModel' required [(ngModel)]='autoskillname'> 
                <div *ngIf="(value.invalid && value.touched)" class="alert alert-danger"> 
                    <div *ngIf="value.errors.required"> 
                        Value is required. 
            <ng-template #footerTemplate> 
                <div class="col-xs-5 col-sm-5 col-lg-5 col-md-5"><button ejs-button>Submit</button></div> 
                <div class="col-xs-5 col-sm-5 col-lg-5 col-md-5"><button ejs-button (click)="onreset($event)" 
                       type="reset" [disabled]="!form.valid">Reset</button></div> 

We have attached a sample for your reference, please find the sample at the following location: https://stackblitz.com/edit/angular-znnekm-qrm5pq  

Please let us know if you need any further assistance on this. 


Replied On April 5, 2019 07:13 AM UTC

For the above example still form validations are not triggered on clicking submit button.Not working as expected

Prince Oliver [Syncfusion]
Replied On April 5, 2019 11:07 AM UTC

Hello Goutham, 
Good day to you. 
In a previous example, we have not bound any event on form submit action, nor have performed any validation when focused out the component. Now, we have modified the sample based on your requirement using a Reactive form validator. Please find the below sample. 
In above sample, we have covered the following. 
  • We have rendered the Dialog component inside the Reactive Form element.
  • In Dialog component, we have rendered two text boxes.
  • We have bound the event for the form submit action, when we create the Dialog component using a created event.
  • If you click the ‘Save Changes’ button, it will perform the validation.
Let us know if you need any further assistance on this. 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon