向devextreme scheduler添加必需的规则 - Angular

时间:2017-09-11 08:21:22

标签: angular calendar devexpress devextreme

我使用angular和devextreme scheduler的插件制作谷歌日历,就像应用程序。 当我创建约会时,我已经制作了一个自定义表单。主题/日期/和选择一个人的选择框。 我使用此功能强制要求我的主题:

Calendar.component.ts:

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

我尝试使用我描述的方法强制所需的方法到我的选择框。但在devextreme调度程序的文档中,我发现没有任何用处。 所以我尝试使用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/(和国家一样)

我想在我的选择框中添加一个必需的验证器功能,但我不知道如何... 需要一些帮助。 非常感谢

1 个答案:

答案 0 :(得分:0)

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

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

<强> Plunker Example