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
close icon

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

     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


3 Replies

PO Prince Oliver Syncfusion Team 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. 


GO Goutham 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

PO Prince Oliver Syncfusion Team 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. 

Live Chat Icon For mobile
Up arrow icon