validation in ejs-multiselect

[Priya Deshpande]

How to make the ejs-multiselect dropdown mandatory for selection? The Submit button should be disabled till we select any value from the multiselect dropdown.

My code is:

 <ejs-multiselect

                  autofocus

                  aria-required

                  id="sample-list"

                  [dataSource]="this.reasonsforVisit"

                  [mode]="mode"

                  [fields]="fields"

                  [placeholder]="waterMark"

                  #reason="ngModel"

                  [(ngModel)]="this.reasonForm.reasonName"

                  name="reasonName"

                  [value]="selectedItems"

                ></ejs-multiselect>

  <div

                *ngIf="reason.invalid && (reason.dirty || reason.touched)"

                class="alert alert-danger"

              >

                <div *ngIf="reason.errors.required">Reason is required.</div>

              </div>

[Ponmani Murugaiyan]

Hi Priya, 

Thanks for contacting Syncfusion support. 

Query: How to make the ejs-multiselect dropdown mandatory for selection? The Submit button should be disabled till we select any value from the multiselect dropdown. 

We have prepared sample as per your requirement and attached below for reference. 

https://ej2.syncfusion.com/angular/demos/#/material/multi-select/template-driven 

<form #form="ngForm"> 

<div class="form-group"> 

    <ejs-multiselect name="skillname" required #book='ngModel' [(ngModel)]='autoskillname' [dataSource]='autoSkillsetData' [placeholder]='autoDrivenPlaceholder'> 

    </ejs-multiselect> 

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

        <div *ngIf="book.errors.required"> Book Name is required.</div> 

    </div> 

 

</div> 

<div class="form-group" style="padding:10px;"> 

    <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6"> 

        <button ejs-button [disabled]="! book.valid">Submit</button> 

    </div> 

    <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6"> 

        <button ejs-button (click)="onreset($event)" type="reset" [disabled]="!(book.valid)">Reset</button> 

    </div> 

</div> 

</form> 

Sample: https://stackblitz.com/edit/angular-wzalya-8wyqdt?file=app.component.html 

Please get back us if you need further assistance. 

Regards, 

Ponmani M 

[sai revanth]

Hi Team,

Good Morning,

I am currently working on Scheduler (Syncfusion Angular) having couple issues, can any one can help me with that ?

1)how to apply Validation for Dropdown functionality

2)while editing the recurring event(single or a series), not sure how to save in Mongo, so that UI can populate the data right.

[Vinitha Devi Murugan]

Hi Sai, 

 

Greetings from Syncfusion Support. 

 

Q1: We have validated your reported query “trying to keep validation for dropdown functionality” at our end and we have prepared below sample to add validation for dropdown field by making use of popupOpen event of our scheduler. 

 

Sample: https://stackblitz.com/edit/angular-dropdown-validation?file=app.component.ts  

 

  onPopupOpen(args: PopupOpenEventArgs): void { 

    if (args.type === 'Editor') { 

      let formElement: HTMLElement = <HTMLElement>( 

        args.element.querySelector('.e-schedule-form') 

      ); 

      let validator: FormValidator = (formElement as EJ2Instance) 

        .ej2_instances[0] as FormValidator; 

      validator.dataBind(); 

      validator.addRules('AirlineId', { 

        required: [true, 'Required field'], 

      }); 

    } 

  } 

 

Q2: We have validated your reported query “while saving the recurring events, i am unable to make changes for single event, out of series (once I try to do that, events are not saving in proper way in Mongo and doesn't populate the events properly on UI)” at our end and let you know that following process takes place when you edit the single occurrence form the series. 

• A new event will be created from the parent event data and added to the Scheduler dataSource, with all its default field values overwritten with the newly modified data and additionally, the RecurrenceID field will be added to it, that holds the Id value of the parent recurring event. Also, a new Id will be generated for this event in the dataSource.
• The parent recurring event needs to be updated with appropriate RecurrenceException field to hold the edited occurrence appointment’s date collection.

 

Refer below image for server side parameter from scheduler, when we edit single occurrence from series. 

 

 

 

Mongo DB image for single occurrence edit 

 

 

 

Scheduler UI: 

 

 

 

Please refer below UG to know more about recurrence edit. 

 

https://ej2.syncfusion.com/angular/documentation/schedule/crud-actions/#how-to-edit-a-single-occurrence-or-entire-series-and-update-it-in-database-at-server-side  

 

https://ej2.syncfusion.com/angular/documentation/schedule/crud-actions/#how-to-delete-a-single-occurrence-or-entire-series-from-scheduler-and-update-it-in-database-at-server-side  

 

Also, we suggest you to refer the quick start project that available in the below link helps you to create the Syncfusion Angular Scheduler with Mongo DB.  

Sample: https://github.com/SyncfusionExamples/ej2-angular-scheduler-mongodb 

Kindly try the above solution and get back to us if you need any further assistance 

 

Regards, 

Vinitha