Search results

Use reactive forms inside Dialog

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

Source
Preview
app.component.ts
app.module.ts
field-error-display.component.ts
main.ts
index.css
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';

@Component({
  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>
                  </div>
                  <app-field-error-display [displayError]="isFieldValid('name')" errorMsg="* Please Enter your name">
                  </app-field-error-display>
              </div>

              <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>
                  </div>
                  <app-field-error-display [displayError]="isFieldValid('email')" errorMsg="* * Enter your email address">
                  </app-field-error-display>
              </div>

              <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>
                  </div>
                  <app-field-error-display [displayError]="isFieldValid('contact')" errorMsg="* Enter your contact number">
                  </app-field-error-display>
              </div>

              <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>
                  </div>
                  <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">
                  </app-field-error-display>
              </div>
              <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>
                </div>
              </div>
          </form>
          </ejs-dialog>
      </div>
    </div>
</div>
  <ejs-dialog id="confirmationDialog" #Dialog [buttons]='dlgButtons' [animationSettings]='animationSettings' [header]='formHeader' [showCloseIcon]='showCloseIcon' [content]='contentData'  [target]='target' [width]='width' [visible]="visible" [isModal]="isModal" >
   </ejs-dialog>`
})
export class AppComponent  {
    @ViewChild('defaultupload')
    public uploadObj: UploaderComponent;
    @ViewChild('Dialog')
    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> = () => {
    this.dialogObj.hide();
  }
  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 {
    this.onFormSubmit();
  }
  public onFileSelect: EmitType<Object> = (args: any) => {
    this.uploadInput = args.filesData[0].name;
  }

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

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

  ngOnInit() {
    this.form = this.formBuilder.group({
      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) {
        this.validateAllFormFields(control);
      }
    });
  }
}
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
 */
@NgModule({
  imports:      [ BrowserModule, FormsModule, DialogModule, UploaderModule, ButtonModule, ReactiveFormsModule ],
  declarations: [ AppComponent, FieldErrorDisplayComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }
import { Component, Input, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-field-error-display',
  styleUrls: ['field-error-display.component.css'],
  encapsulation: ViewEncapsulation.None,
  template: `<div *ngIf="displayError" >
                <div class="e-error">
                  {{ errorMsg }}
                </div>
              </div>`
})
export class FieldErrorDisplayComponent {

  @Input() errorMsg: string;
  @Input() displayError: boolean;

}
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'].destroy();
  }
  window['ngRef'] = ref;

  // Otherwise, log the boot error
}).catch(err => console.error(err));
#container {
  visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}.control_wrapper {
  max-width: 500px;
  min-width: 245px;
  margin: auto;
}
.address-field {
resize: none;
}

.e-error {
  padding-top: 7px;
}


.control-section {
  width: 700px;
  height: 700px;
  position: relative;
  margin: auto;
}

#control_wrapper {
max-width: 600px;
margin: auto;
}
.highcontrast #control_wrapper {
background: #000000;
}
#reactive .upload-area {
width: 86%;
}

#browse {
  float: right;
  position: relative;
  top: -4px;
  right: -60px;
}
#reactive .form-group .submit-btn {
margin-top: 15px;
position: relative;
}
#reactive .form-group .desc {
margin: 2% 16% 0% 18%;
}
@media only screen and (max-width: 500px) {
  #reactive .form-group .submitBtn .desc {
  margin: 12px;
}
}
#reactive .form-group .submitBtn {
position: relative;        
text-align: center;
}
.bootstrap #reactive .form-group .submit-btn {
margin-left: 8px;          
}
.e-bigger.material #reactive .form-group .submit-btn {
margin-left: -7px;          
}
.fabric #reactive .form-group .submit-btn, .highcontrast #reactive .form-group .submit-btn {
margin-left: -11px;          
}
.e-bigger.fabric #reactive .form-group .submit-btn, .e-bigger.highcontrast #reactive .form-group .submit-btn {
margin-left: -25px;          
}
.e-bigger.bootstrap #reactive .form-group .submit-btn {
margin-left: -8px;          
}
.success .successmsg {
border: 0.5px solid green;
padding: 10%;
color: green;
}
form#reactive {
position: relative;
top: 14%;
}
#reactive .e-upload {
display: none;
}
#reactive .upload-area button#browse {
float: right;
margin-top: -28px;
}
.fabric #reactive .upload-area button#browse,
.highcontrast #reactive .upload-area button#browse {
  float: right;
  margin-top: -32px;
  }
  .bootstrap #reactive .upload-area button#browse {
  float: right;
  margin-top: -35px;
  }
  .fabric.e-bigger #reactive .upload-area button#browse,
.highcontrast.e-bigger #reactive .upload-area button#browse,
.bootstrap.e-bigger #reactive .upload-area button#browse {
    margin-top: -40px;
  }
  .material.e-bigger #reactive .upload-area button#browse {  
    margin-top: -36px;
    }
  .b
#reactive .form-group .e-float-input.upload-area .e-float-line, .material .e-float-input.upload-area .e-float-line {  
  width: 70%;
  margin-top: initial;
}
#reactive .form-group .upload-area input {
width: 100%;
}

@media (min-width: 250px) and (max-width: 500px) {
#control_wrapper.control_wrapper {
  padding: 1% 4% 12%;
}
}
@media (max-width: 300px) {
#control_wrapper.control_wrapper {
  padding: 1% 4% 15%;
}
}
.bootstrap #reactive .form-group .upload-area {
 background: transparent;
}
.form-title {
text-align: center;
}