Validação do DropDownList de um Event Type

[Alexandre]

Olá, 

Criei um DropDownList e gostaria de colocar uma validação, como ser obrigatório a seleção daquele campo.

        if (!args.element.querySelector('.custom-field-row')) {

            let row: HTMLElement = createElement('div', { className: 'custom-field-row' });

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

            formElement.firstChild?.insertBefore(row, args.element.querySelector('.e-title-location-row'));

            // ------------------//

            // Droplist Usuarios //

            // ------------------//

            let container: HTMLElement = createElement('div', { className: 'custom-field-container mb-3' });

            let inputEle: HTMLInputElement = createElement('input', {

                className: 'e-field', attrs: { name: 'Usuario' }

            }) as HTMLInputElement;

            container.appendChild(inputEle);

            row.appendChild(container);

            let dropDownList: DropDownList = new DropDownList({

                allowFiltering: true,

                dataSource: this.listaUsuariosAgendamento,

                fields: { text: 'Nome', value: 'IDUsuario' },

                value: (<{ [key: string]: Object; }>(args.data))['IDUsuario'] as string,

                floatLabelType: 'Always', placeholder: 'Usuarios'

            });

            dropDownList.appendTo(inputEle);

            inputEle.setAttribute('name', 'IDUsuario');

}

[Satheesh Kumar Balasubramanian]

Hi Alexandre,

You can set validation for custom fields as shown in the below code snippets.

https://stackblitz.com/edit/ej2-angular-schedule-validation-custom-dropdownlist?file=src%2Fapp.component.ts

app.component.ts:

  public onPopupOpen(args: PopupOpenEventArgs): void {

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

      if (!args.element.querySelector('.custom-field-row')) {

        // Create required custom elements in initial time

        const row: HTMLElement = createElement('div', {

          className: 'custom-field-row',

        });

        const formElement: HTMLElement = args.element.querySelector(

          '.e-schedule-form'

        ) as HTMLElement;

        formElement.firstChild.insertBefore(

          row,

          args.element.querySelector('.e-title-location-row')

        );

        const container: HTMLElement = createElement('div', {

          className: 'custom-field-container',

        });

        const inputEle: HTMLElement = createElement('input', {

          className: 'e-field',

          attrs: { name: 'EventType' },

        });

        container.appendChild(inputEle);

        row.appendChild(container);

        const dropDownList: DropDownList = new DropDownList({

          dataSource: [

            { text: 'Public Event', value: 'public-event' },

            { text: 'Maintenance', value: 'maintenance' },

            { text: 'Commercial Event', value: 'commercial-event' },

            { text: 'Family Event', value: 'family-event' },

          ],

          fields: { text: 'text', value: 'value' },

          value: (args.data as Record<string, any>).EventType as string,

          floatLabelType: 'Always',

          placeholder: 'Event Type',

        });

        dropDownList.appendTo(inputEle);

        inputEle.setAttribute('name', 'EventType');

      }

      let formElement: HTMLElement = <HTMLElement>(

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

      );

      let validator: FormValidator = (formElement as EJ2Instance)

        .ej2_instances[0] as FormValidator;

      validator.addRules('EventType', {

        required: [true, 'Item required'],

      });

    }

  }

Regards,

Satheesh