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

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.

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>

Save Changes

</button>

</ng-template>

</ejs-dialog>

Reply | Reply with quote

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.

<ejs-dialog #template>

<ng-template #header>

</ng-template>

<ng-template #content>

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

</ejs-autocomplete>

Value is required.

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

Reply | Reply with quote

Goutham

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

Reply | Reply with quote

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.

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

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
143203	Mar 8,2019 04:03 PM UTC	Apr 5,2019 11:07 AM UTC	Angular - EJ 2	3

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US