向 devextreme 调度程序添加必需的规则 - Angular

Question

我正在使用 angular 和 devextreme 调度程序的插件制作一个 google 日历之类的应用程序。当我创建约会时，我制作了一个自定义表格。主题 / 日期 / 和一个 select 框给 select 一个人。我使用此功能强制要求我的主题遵守规则：

Calendar.component.ts:

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

我尝试使用我描述的方法将所需的方法强制到我的 selectbox。但是在 devextreme scheduler 的文档中我发现没有任何用处。所以我尝试使用 Dx 表单验证器方法来执行此操作： 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>

将此添加到我的日历模块：

import ....         DxValidatorModule,DxValidationSummaryModule

就像我在这里看到的那样：https://js.devexpress.com/Demos/WidgetsGallery/Demo/Validation/Overview/Angular/Light/（像国家）

我想向我的 selectbox 添加一个必需的验证器函数，但我不知道如何... 请需要一些帮助。非常感谢

Answer 1

我想你的方法应该有效。只需确保您指定了正确的 fieldName:

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

Plunker Example

向 devextreme 调度程序添加必需的规则 - Angular

adding a required rule to devextreme scheduler - Angular

calendar

devexpress

devextreme

angular