Search code examples
angularcalendardevexpressdevextreme

adding a required rule to devextreme scheduler - Angular


i'am using angular and devextreme scheduler's plugin to make an google calendar like app. When i create an appointment, i've made a custom form. subject / Date / and a select box to select a person. i force the required rules to my subject using this function :

Calendar.component.ts:

  onAppointmentFormCreated(data: any) {
    console.log(data)
      let form = data.form;
      form.itemOption("text","isRequired",true);
  }

I tryed to force a required method to my selectbox using the method i described. but on the devextreme scheduler's documentation i found nothing useful. So i tryed to use Dx form validator method doing this : calendar.component.html

<dx-scheduler
    [showAllDayPanel]="false"
    [dataSource]="appointmentsData"
    appointmentTemplate="appointmentTemplate"
    [views]='["agenda","workWeek"]'
    startDateExpr="startDate"
    endDateExpr="endDate"
    currentView="workWeek"
    textExpr="text"
    [firstDayOfWeek]="1"
    [startDayHour]="9"
    [endDayHour]="18"
    width="100%"
    [height]="1100"
    (onAppointmentFormCreated)="onAppointmentFormCreated($event)"
    (onAppointmentAdding)="creatingAppointment($event)"
    (onAppointmentAdded)="createAppointment($event)"
    (onAppointmentUpdated)= "updatingAppointment($event)"
    (onAppointmentDeleted)= "deletingAppointment($event)">

    <dx-date-box [value] = "date" >
      <dxo-display-format  type="shortDateFR"></dxo-display-format>
    </dx-date-box>

    <div *dxTemplate="let appointment of 'appointmentTemplate'">
    <i>{{appointment.text}} -- </i>
    <b>{{appointment.ownerName}}</b>
    </div>

    <dxi-resource
        fieldExpr="ownerId"
        label="Personne"
        [dataSource]="personData">
        <dx-validator>
            <dxi-validation-rule type="required" message="Person is required"></dxi-validation-rule>
        </dx-validator> 
    </dxi-resource>

</dx-scheduler>

adding this to my calendar module:

import ....         DxValidatorModule,DxValidationSummaryModule

like i saw here : https://js.devexpress.com/Demos/WidgetsGallery/Demo/Validation/Overview/Angular/Light/ ( like country )

i would like to add a required validator function to my selectbox but i don't know how... Need some help please. Thanks very much


Solution

  • I quess your method should work. Just make sure that you specified the correct fieldName:

    form.itemOption('ownerId', 'isRequired', true);
    

    Plunker Example