how to get real-time changes to an event form

[c]

Hi SyncFusion,

I used the component ejs-schedule and I create an another component who contain the differentes fields of my form (#editorTemplate).    

<ejs-schedule ...>

<ng-template #editorTemplate let-data>

     <my-another-comp>

</amy-another-comp>

</ng-template>

</ejs-schedule

On each field, I have the same rules who execute when i have no value: 

const formElement: HTMLElement = event.element.querySelector('.e-schedule-form') as HTMLElement;

this.validator = (formElement as EJ2Instance).ej2_instances[0] as FormValidator

this.validator.addRules('Subject', { required: [true, 'need value'] }

Unfortunately, when I start writing a value, the error is not cleared from the field.

any idea for resolve this ? Thanks you so much. I hope you can help me. 

Attachment: Capture_d’écran_20200610_à_23.22.21_1ef5fb16.zip

[Ravikumar Venkatesan]

Dear Customer, 

Greetings from Syncfusion support. 

We have validated your reported query “when I start writing a value, the error is not cleared from the field. any idea for resolve this ?” at our end. We have achieved your requirement with the help of the below code. We have prepared a sample for your reference and it can be available below. 

[app.component.html] 

          <tr> 

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

            <td colspan="4"> 

              <ejs-dropdownlist id='EventType' name="EventType" class="e-field" data-name="Status" placeholder='Choose Status' [dataSource]='StatusData' [fields]='statusFields' value='{{data.Status}}' (select)="onSelect($event)"> 

              </ejs-dropdownlist> 

            </td> 

          </tr> 

          <tr> 

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

            <td colspan="4"> 

              <input id="Subject" autocomplete="off" class="e-field e-input" type="text" value="" name="Subject" (input)="onChange($event)" style="width: 100%" /> 

            </td> 

          </tr> 

          <tr> 

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

            <td colspan="4"> 

              <input id="Location" autocomplete="off" class="e-field e-input" type="text" value="" name="Location" (input)="onChange($event)" style="width: 100%" /> 

            </td> 

          </tr> 

[app.component.ts] 

  public onSelect(args) { 

    let alertElement = (document.querySelector('#EventType_Error') as HTMLElement); 

    if (alertElement) { 

      alertElement.style.display = 'none'; 

    } 

  } 

 

  public onChange(args) { 

    if (args.currentTarget.value != '') { 

      let locationAlert = (document.querySelector('#Location_Error') as HTMLElement); 

      let subjectAlert = (document.querySelector('#Subject_Error') as HTMLElement); 

      if (subjectAlert && args.currentTarget.id === 'Subject') { 

        subjectAlert.style.display = 'none'; 

      } else if (locationAlert && args.currentTarget.id === 'Location') { 

        locationAlert.style.display = 'none'; 

      } 

    } 

  } 

Sample: https://stackblitz.com/edit/angular-ej2-schedule-editor-template-validation-customiz-nzs4dv?file=app.component.ts 

Kindly try the above sample and get back to us if you would require further assistance. 

API (input event of TextBox): https://ej2.syncfusion.com/angular/documentation/api/textbox/#input 

API (select event of DropDownList): https://ej2.syncfusion.com/angular/documentation/api/drop-down-list/#select 

Regards, 

Ravikumar Venkatesan 

[c]

Thank you :) . But if I have many fields, there isn't a solution for get all elements and hide theirs tooltip ? Because , it's required many condition if I have 10 fields custom. Thank you

[Ravikumar Venkatesan]

Dear Customer, 

Thanks for the update. 

We have validated your reported query “if I have many fields, there isn't a solution for get all elements and hide theirs tooltip” at our end. We have achieved your requirement with the help of the below code. We have prepared a sample for your reference and it can be available below. 

[app.component.html] 

          <tr> 

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

            <td colspan="4"> 

              <ejs-dropdownlist id='EventType' name="EventType" class="e-field" data-name="Status" placeholder='Choose Status' [dataSource]='StatusData' [fields]='statusFields' value='{{data.Status}}' (change)="onChange($event)"> 

              </ejs-dropdownlist> 

            </td> 

          </tr> 

          <tr> 

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

            <td colspan="4"> 

              <input id="Subject" name="Subject" autocomplete="off" class="e-field e-input" type="text" value="" (keyup)="onChange($event)" style="width: 100%" /> 

            </td> 

          </tr> 

          <tr> 

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

            <td colspan="4"> 

              <input id="Location" name="Location" autocomplete="off" class="e-field e-input" type="text" value="" (keyup)="onChange($event)" style="width: 100%" /> 

            </td> 

          </tr> 

[app.component.ts] 

  public onChange(args) { 

    let form = (document.querySelector('.e-schedule-form') as any).ej2_instances[0]; 

    let name = args.element ? args.element.id : args.currentTarget.name; 

    // Pass the name of the element to perform validation 

    form.validateRules(name); 

  } 

Sample: https://stackblitz.com/edit/angular-ej2-schedule-editor-template-validation-customiz-hm2sa9?file=app.component.ts 

Kindly try the above sample and get back to us if you would require further assistance. 

Regards, 

Ravikumar Venkatesan 

[c]

Thansk , I resolved this :D 

[Vengatesh Maniraj]

Dear Customer, 

Thanks for the update. 

We are happy that you have resolved the problem. 

Please get in touch with us if you need any further assistance. 

Regards, 

Vengatesh