How can i apply angular material validation to editor window of schedular?

[akash]

How can i apply angular material validation to editor window of schedular?

Can you please help me with this

[Hareesh Balasubramanian]

Hi Akash, 

Greetings from Syncfusion Support..! 

We have validated your shared query at our end and suspect that your requirement is to add validations to the editor fields of the Scheduler and for that, we have prepared a sample using built-in validation options od scheduler which can be viewed from the following link. 

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

UG link: https://ej2.syncfusion.com/angular/documentation/schedule/editor-template/#field-validation  

    public eventSettings: EventSettingsModel = { 

        dataSource: this.data, 

        fields: { 

            subject: { name: 'Subject', validation: { required: true } }, 

            location: { 

                name: 'Location', validation: { 

                    required: true, 

                    regex: ['^[a-zA-Z0-9- ]*$', 'Special character(s) not allowed in this field'] 

                } 

            }, 

            description: { 

                name: 'Description', validation: { 

                    required: true, minLength: 5, maxLength: 500 

                } 

            }, 

            startTime: { name: 'StartTime', validation: { required: true } }, 

            endTime: { name: 'EndTime', validation: { required: true } } 

        } 

    }; 

Kindly try the above solution and get back to us whether you need validation for custom fields on editor template or the above solution meets your requirement . 

We will happy to assist you. 

Regards, 

Hareesh 

[akash]

Hi Akash, 

Greetings from Syncfusion Support..! 

We have validated your shared query at our end and suspect that your requirement is to add validations to the editor fields of the Scheduler and for that, we have prepared a sample using built-in validation options od scheduler which can be viewed from the following link. 

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

UG link: https://ej2.syncfusion.com/angular/documentation/schedule/editor-template/#field-validation  

    public eventSettings: EventSettingsModel = { 

        dataSource: this.data, 

        fields: { 

            subject: { name: 'Subject', validation: { required: true } }, 

            location: { 

                name: 'Location', validation: { 

                    required: true, 

                    regex: ['^[a-zA-Z0-9- ]*$', 'Special character(s) not allowed in this field'] 

                } 

            }, 

            description: { 

                name: 'Description', validation: { 

                    required: true, minLength: 5, maxLength: 500 

                } 

            }, 

            startTime: { name: 'StartTime', validation: { required: true } }, 

            endTime: { name: 'EndTime', validation: { required: true } } 

        } 

    }; 

Kindly try the above solution and get back to us whether you need validation for custom fields on editor template or the above solution meets your requirement . 

We will happy to assist you. 

Regards, 

Hareesh 

Thank You Hareesh Balasubramanian For your response.

But I wanted to add Angular Material Validation with angular material error message 

Like this : check the below screenshot

Attachment: Screenshot_(14)_74218710.rar

[Hareesh Balasubramanian]

Hi Akash, 

Thanks for the update. 

We have modified our previously updated sample for your query “add Angular Material Validation with angular material error message” in that, we have rendered the Angular validation for the “Subject” and ‘’Description” field, which can be viewed from the following link. 

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

<ng-template #editorTemplate let-data> 

  <form 

                id="formId" 

                [formGroup]="reactForm" 

                #formDir="ngForm" 

                class="form-horizontal" 

                novalidate="" 

  > 

                <table 

                  *ngIf="data != undefined" 

                  class="custom-event-editor" 

                  width="100%" 

                  cellpadding="5" 

                > 

                  <tbody> 

                                <tr> 

                                  <td class="e-textlabel">Summary</td> 

                                  <td colspan="4"> 

                                                <div class="e-float-input"> 

                                                  <input 

                                                                id="Subject" 

                                                                class="e-field e-input" 

                                                                type="text" 

                                                                value="{{data.Subject}}" 

                                                                name="Subject" 

                                                                style="width: 100%" 

                                                                formControlName="check" 

                                                  /> 

                                                  <span class="e-float-line"></span> 

                                                </div> 

                                                <div *ngIf="check.errors"> 

                                                  <div 

                                                                *ngIf="check.errors.required && check.touched" 

                                                                class="e-error" 

                                                  > 

                                                                This field is required. 

                                                  </div> 

                                                </div> 

                                  </td> 

                                </tr> 

                                <tr> 

                                  <td class="e-textlabel">Status</td> 

                                  <td colspan="4"> 

                                                <ejs-dropdownlist 

                                                  id="Status" 

                                                  class="e-field" 

                                                  data-name="Status" 

                                                  placeholder="Choose Status" 

                                                  [dataSource]="StatusData" 

                                                  [fields]="statusFields" 

                                                 value="{{data.Status}}" 

                                                > 

                                                </ejs-dropdownlist> 

                                  </td> 

                                </tr> 

                                <tr> 

                                  <td class="e-textlabel">From</td> 

                                  <td colspan="4"> 

                                                <ejs-datetimepicker 

                                                  id="StartTime" 

                                                  class="e-field" 

                                                  data-name="StartTime" 

                                                  format="M/dd/yy h:mm a" 

                                                  [value]="dateParser(data.startTime || data.StartTime)" 

                                                > 

                                                </ejs-datetimepicker> 

                                  </td> 

                                </tr> 

                                <tr> 

                                  <td class="e-textlabel">To</td> 

                                  <td colspan="4"> 

                                                <ejs-datetimepicker 

                                                  id="EndTime" 

                                                  class="e-field" 

                                                  data-name="EndTime" 

                                                  format="M/dd/yy h:mm a" 

                                                  [value]="dateParser(data.endTime || data.EndTime)" 

                                                > 

                                                </ejs-datetimepicker> 

                                  </td> 

                                </tr> 

                                <tr> 

                                  <td class="e-textlabel">Reason</td> 

                                  <td colspan="4"> 

                                                <div class="e-float-input"> 

                                                  <textarea 

                                                                id="Description" 

                                                                class="e-field e-input" 

                                                                name="Description" 

                                                                rows="3" 

                                                                cols="50" 

                                                                value="{{data.Description}}" 

                                                                style="width: 100%; height: 60px !important; resize: vertical" 

                                                                formControlName="reason" 

                                                  ></textarea> 

                                                  <span class="e-float-line"></span> 

                                                </div> 

                                                <div *ngIf="reason.errors"> 

                                                  <div 

                                                                *ngIf="reason.errors.required && reason.touched" 

                                                                class="e-error" 

                                                  > 

                                                                This field is required. 

                                                  </div> 

                                                </div> 

                                  </td> 

                                </tr> 

                  </tbody> 

                </table> 

  </form> 

</ng-template> 

  constructor() { 

    this.reactForm = new FormGroup({ 

      check: new FormControl("", [FormValidators.required]), 

      reason: new FormControl("", [FormValidators.required]) 

    }); 

  } 

  get check() { 

    return this.reactForm.get("check"); 

  } 

  get reason() { 

    return this.reactForm.get("reason"); 

  } 

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

Regards, 

Hareesh 

[akash]

Thank you so much for the response.

I will try the solution and will let you know if anything goes wrong.

Again Thank you :)

[Nevitha Ravi]

Hi Akash, 

You are most welcome, please get back to us if you need any further assistance. 

We are always happy to assist you. 

Regards, 

Nevitha  

[akash]

hello,

I have another query

Can I have the example of the CRUD and data get call from web api using the httpclient and  I want to do custom call to my API in scheduler

not like this : 

this.scheduleData = new DataManager({

      url: "https://localhost:44385/api/ScheduleAppointments/",

      crudUrl: "https://localhost:44385/api/ScheduleAppointments/",

      adaptor: new UrlAdaptor(),

      crossDomain: true

    });

[Hareesh Balasubramanian]

Hi Akash, 

Thanks for the update. 

We have prepared a CRUD sample based on your shared query “Can I have the example of the CRUD and data get call from web api using the httpclient” using HttpClient service for performing CRUD actions in the Scheduler, which can be downloaded from the following link. 

Service: https://www.syncfusion.com/downloads/support/forum/160216/ze/Service-1616773119  

Sample: https://stackblitz.com/edit/angular-crud-using-httpclient-scheduler-sample?file=app.component.ts  

Reference link: https://angular.io/guide/http 

  onBound(): void { 

    if (this.temp) { 

      this.http 

        .post("http://localhost:54738/Home/GetData", {}) 

        .subscribe(data => { 

          let schObj = (document.querySelector(".e-schedule") as any) 

            .ej2_instances[0]; 

          schObj.eventSettings.dataSource = data; 

        }); 

      this.temp = false; 

    } 

  } 

 

  onBegin(args: any): void { 

    if (args.requestType === "eventCreate") { 

      this.http 

        .post("http://localhost:54738/Home/Insert", args.data[0], { 

          headers: new HttpHeaders({ 

            "Content-Type": "application/json" 

          }) 

        }) 

        .subscribe(data => { 

          let schObj = (document.querySelector(".e-schedule") as any) 

            .ej2_instances[0]; 

          schObj.eventSettings.dataSource = data; 

        }); 

    } else if (args.requestType === "eventChange") { 

      this.http 

        .post("http://localhost:54738/Home/Update", args.data, { 

          headers: new HttpHeaders({ 

            "Content-Type": "application/json" 

          }) 

        }) 

        .subscribe(data => { 

          let schObj = (document.querySelector(".e-schedule") as any) 

            .ej2_instances[0]; 

          schObj.eventSettings.dataSource = data; 

        }); 

    } else if (args.requestType === "eventRemove") { 

      this.http 

        .post("http://localhost:54738/Home/Delete", args.data[0], { 

          headers: new HttpHeaders({ 

            "Content-Type": "application/json" 

          }) 

        }) 

        .subscribe(data => { 

          let schObj = (document.querySelector(".e-schedule") as any) 

            .ej2_instances[0]; 

          schObj.eventSettings.dataSource = data; 

        }); 

    } 

  } 

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

We will happy to assist you. 

Regards, 

Hareesh 

[akash]

Thank you so much it worked!!!!

You guys are the best!!

[Nevitha Ravi]

Hi Akash, 

You are most welcome..! please get back to us if you need any further assistance. 

Regards, 

Nevitha