Custom form validation

[Carla Candiotti]

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!

[Ravikumar Venkatesan]

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(args: any): 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;

      }

    }

  }

[Carla Candiotti]

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

[Ravikumar Venkatesan]

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