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

[Goutham]

     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.

Example:

     <ejs-dialog #Dialog>

    <ng-template #header>

      Header content....

    </ng-template>

    <ng-template #content>

                  <ejs-textbox  [(ngModel)]="Name">

                  </ejs-textbox>

      doing its validation......

                  

    </ng-template>

    <ng-template #footerTemplate>

              <button ejs-button>Cancel</button>

              <button ejs-button >

                Save Changes

              </button>

    </ng-template>

  </ejs-dialog>

[Prince Oliver]

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> 

            <ng-template #content> 

                <ejs-autocomplete name="skillname" #value='ngModel' required [(ngModel)]='autoskillname'> 

                </ejs-autocomplete> 

                <div *ngIf="(value.invalid && value.touched)" class="alert alert-danger"> 

                    <div *ngIf="value.errors.required"> 

                        Value is required. 

                    </div> 

                </div> 

            </ng-template> 

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

            </ng-template> 

        </ejs-dialog> 

    </div> 

</form> 

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. 

Regards,  

Prince 

[Goutham]

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

[Prince Oliver]

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. 

 

Sample: https://stackblitz.com/edit/angular-k6vtkf-ctcy9x   

 

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.

 

API link: https://ej2.syncfusion.com/angular/documentation/api/dialog/#created 

 

Let us know if you need any further assistance on this. 

 

Regards, 

Prince