We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Custom form validation

Hello,


I would like to customize editor template and its validation. I've created a separated component which contains the form and emits an event each time the form changes. The form validation is handled by Angular forms.


Its working fine but I would like to disable the save button if the form is not valid, therefore I reproduced this example from the documentation: https://ej2.syncfusion.com/angular/documentation/schedule/editor-template/#how-to-enable-save-button-in-customized-event-editor-using-template.


I plugged the onChange method to my form component's event and the button disables/enables well except in one case: the editor is opened from an existing event; and that event is not complete, so the form is not valid but the button is enabled anyway.


Here an example to illustrate my issue (the persistence is not implemented but I don't think it is the source of the issue):

https://stackblitz.com/edit/angular-ivy-a9bwv8?file=src%2Fapp%2Fschedule%2Fscheduler.component.ts,src%2Fapp%2Fschedule-form%2Fschedule-form.component.html,src%2Fapp%2Fschedule-form%2Fschedule-form.component.ts



In addition, I would like to test my method onChange with karma and check if the button is effectively enabled depending on form's state. I don't manage to simulate editor's opening during the test, I'm getting errors. Do you provide tools for testing purposes?


Thank you for your responses!


3 Replies 1 reply marked as answer

RV Ravikumar Venkatesan Syncfusion Team November 3, 2022 10:53 AM

You can disable the save button of the editor window while opening it for the appointment with help of the popupOpen event of the Schedule as shown in the snippet. Refer to the shared Angular UG link to perform testing for the Angular application.


Sample: https://stackblitz.com/edit/ej2-angular-schedule-validation-sample?file=src%2Fapp%2Fschedule%2Fscheduler.component.ts

Testing: https://angular.io/guide/testing


[app.component.ts]

  onPopupOpen(argsany): void {

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

      if (!args.target?.classList.contains('e-appointment')) {

        args.cancel = true// Prevent Quick info opening on cell click

      }

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

      var saveBtn = args.element.querySelector('.e-custom-disable');

      if (saveBtn) {

        saveBtn.disabled = true;

      }

    }

  }



CC Carla Candiotti November 9, 2022 11:37 AM

Hello,


Thank you for the button, the fix works.


I've added a test for my SchedulerComponent which try to open an editor, but I'm getting errors. I would like to open an editor during my tests and check if the validation button is disabled correctly. 


I'm  getting that error:



See my test on the stackblitz below:

https://stackblitz.com/edit/ej2-angular-schedule-validation-sample-enkwmu?file=src%2Fapp%2Fschedule%2Fscheduler.component.spec.ts



Thank you for your help



RV Ravikumar Venkatesan Syncfusion Team November 14, 2022 04:35 AM

You can open the editor and check the validation button is disabled correctly as shown in the below code snippet.


[app.component.spec.ts]

describe('SchedulerComponent', () => {

  let component: SchedulerComponent;

  let fixture: ComponentFixture<SchedulerComponent>;

  beforeEach(((done: DoneFn) => {

    fixture = TestBed.configureTestingModule({

      imports: [ScheduleAllModule, BrowserModule, BrowserAnimationsModule, FormsModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule],

      declarations: [SchedulerComponent, ScheduleFormComponent],

    }).createComponent(SchedulerComponent);

    component = fixture.componentInstance;

    fixture.detectChanges();

    done();

  }));

 

  it('should create the app', () => {

    expect(component).toBeTruthy();

    let schedule = fixture.debugElement.query(By.css('.e-schedule'));

    let nativeEle = schedule.nativeElement;

    expect(nativeEle.classList.contains('e-schedule')).toBe(true);

  });

 

  it('should open the editor', (done: DoneFn) => {

    expect(component.scheduleObj).toBeTruthy();

    component.scheduleObj.openEditor({}, 'Add');

    setTimeout(() => {

      let dialogEle = document.querySelector('.e-schedule-dialog');

      let saveBtn: HTMLButtonElement = dialogEle?.querySelector('.e-event-save') as HTMLButtonElement;

      expect(saveBtn?.classList.contains('e-custom-disable')).toBe(true);

      expect(saveBtn?.disabled).toBe(true);

      component.scheduleObj.closeEditor();

      done();

    }, 100);

  });

});


If this post is helpful, consider accepting it as the solution so that other members can locate it more quickly.


Attachment: ej2angularscheduleeditorwindowtest_a48213ea.zip

Marked as answer
Loader.
Live Chat Icon For mobile
Up arrow icon