Use reactive forms inside dialog in Angular Dialog component

19 Sep 202211 minutes to read

The following sample demonstrates how to use the reactive forms with required validation inside the dialog.
For more details, refer to the Angular Documentation

import { Component, Inject, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
import { EmitType } from '@syncfusion/ej2-base';
import { UploaderComponent } from '@syncfusion/ej2-angular-inputs';
import { DialogComponent } from '@syncfusion/ej2-angular-popups';

  selector: 'app-root',
  template: `<div class="control-section">
    <div class="col-lg-12">
        <div class="control_wrapper" id="control_wrapper" style="margin: 25px auto;">
        <ejs-dialog id="reactDialog" #FormDialog width= '450px'
          [showCloseIcon]='false' target='.control-section'>
          <form id="reactive" [formGroup]="form">
              <div class="form-group" style="padding-top: 11px;">
                  <div class="e-float-input">
                      <input type="text" id="name" name="name" class="required" formControlName="name">
                      <span class="e-float-line"></span>
                      <label class="e-float-text e-label-top" for="name">Name</label>
                  <app-field-error-display [displayError]="isFieldValid('name')" errorMsg="* Please Enter your name">

              <div class="form-group" style="padding-top: 11px;">
                  <div class="e-float-input">
                      <input type="text" id="email" name="email" class="required" formControlName="email">
                      <span class="e-float-line"></span>
                      <label class="e-float-text e-label-top" for="email">Email</label>
                  <app-field-error-display [displayError]="isFieldValid('email')" errorMsg="* * Enter your email address">

              <div class="form-group" style="padding-top: 11px;">
                  <div class="e-float-input">
                      <input type="number" id="contact" name="contact" class="required" formControlName="contact">
                      <span class="e-float-line"></span>
                      <label class="e-float-text e-label-top" for="contact">Contact No</label>
                  <app-field-error-display [displayError]="isFieldValid('contact')" errorMsg="* Enter your contact number">

              <div class="form-group upload-area" style="padding-top: 11px;">
                  <div class="e-float-input upload-area">
                      <input type="text" id="upload" name="upload" [(ngModel)]="uploadInput" readonly formControlName="upload" class="required">
                      <span class="e-float-line"></span>
                      <label class="e-float-text e-label-top" for="upload">Choose a file</label>
                  <button id="browse" class="e-control e-btn e-info" (click)='browseClick()'>Browse...</button>
                  <ejs-uploader #defaultupload id='fileupload' allowedExtensions="image/*" [autoUpload]=false [multiple]='multiple' (selected)='onFileSelect($event)'></ejs-uploader>
                  <app-field-error-display [displayError]="isFieldValid('upload')" errorMsg="* Select any file">
              <div class="form-group" style="padding-top: 11px;">
                <div class="submitBtn">
                  <button class="submit-btn e-btn" id="submit-btn" [disabled]="form.invalid" (click)= "Submit()">Submit</button>
                  <div class="desc"><span>*This button is not a submit type and the form submit handled from externally.</span></div>
  <ejs-dialog id="confirmationDialog" #Dialog [buttons]='dlgButtons' [animationSettings]='animationSettings' [header]='formHeader' [showCloseIcon]='showCloseIcon' [content]='contentData'  [target]='target' [width]='width' [visible]="visible" [isModal]="isModal" >
export class AppComponent  {
    public uploadObj: UploaderComponent;
    public dialogObj: DialogComponent;
    public form: FormGroup;
    public width: string = '335px';
    public visible: boolean = false;
    public multiple: boolean = false;
    public showCloseIcon: Boolean = true;
    public formHeader: string = 'Success';
    public contentData: string = 'Your details have been updated successfully, Thank you.';
    public target: string = '#reactDialog';
    public isModal: boolean = true;
    public animationSettings: any = {
          effect: 'Zoom'
   private formSumitAttempt: boolean;
   public dlgBtnClick: EmitType<object> = () => {
  public dlgButtons: Object[] = [{ click: this.dlgBtnClick.bind(this), buttonModel: { content: 'Ok', isPrimary: true } }];
  public uploadInput: string = '';
  public browseClick() {
      document.getElementsByClassName('e-file-select-wrap')[0].querySelector('button').click(); return false;
  public Submit(): void {
  public onFileSelect: EmitType<Object> = (args: any) => {
    this.uploadInput = args.filesData[0].name;

  public onFormSubmit(): void {
    this.formSumitAttempt = true;
    if (this.form.valid) {;
    } else {

  constructor(@Inject(FormBuilder) public formBuilder: FormBuilder) {}

  ngOnInit() {
    this.form ={
      name: [null, Validators.required],
      email: [null, Validators.required],
      contact: [null, Validators.required],
      upload: [null, Validators.required],

  isFieldValid(field: string) {
    return ((!this.form.get(field).valid && this.form.get(field).touched) ||
    (this.form.get(field).untouched && this.formSumitAttempt));

  validateAllFormFields(formGroup: FormGroup) {
    Object.keys(formGroup.controls).forEach(field => {
      const control = formGroup.get(field);
      if (control instanceof FormControl) {
        control.markAsTouched({ onlySelf: true });
      } else if (control instanceof FormGroup) {
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { UploaderModule } from '@syncfusion/ej2-angular-inputs';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { DialogModule } from '@syncfusion/ej2-angular-popups';
import { FieldErrorDisplayComponent } from './field-error-display.component';
 * Module
  imports:      [ BrowserModule, FormsModule, DialogModule, UploaderModule, ButtonModule, ReactiveFormsModule ],
  declarations: [ AppComponent, FieldErrorDisplayComponent ],
  bootstrap:    [ AppComponent ]
export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule).then(ref => {
  // Ensure Angular destroys itself on hot reloads.
  if (window['ngRef']) {
  window['ngRef'] = ref;

  // Otherwise, log the boot error
}).catch(err => console.error(err));