<form
  dForm
  [layout]="formConfig.layout"
  [labelSize]="formConfig.labelSize"
  (dSubmit)="submitPlanForm($event)"
>
  <d-form-item *ngFor="let item of formConfig.items">
    <d-form-label [required]="item.required">{{ item.label }}：</d-form-label>
    <d-form-control [extraInfo]="item.extraInfo">
      <input
        dTextInput
        [name]="item.prop"
        [(ngModel)]="_formData[item.prop]"
        *ngIf="item.type === 'input'"
        [dValidateRules]="item.rule"
        [dValidateRules]="item.required ? item.rule : {}"
      />
      <d-select
        *ngIf="item.type === 'select'"
        [appendToBody]="true"
        [options]="item.options"
        [name]="item.prop"
        [(ngModel)]="_formData[item.prop]"
        [dValidateRules]="item.required ? item.rule : []"
      ></d-select>
      <div
        class="devui-input-group devui-dropdown-origin"
        *ngIf="item.type === 'datePicker'"
      >
        <input
          class="devui-input devui-form-control"
          placeholder="y/MM/dd"
          (click)="datePicker1.toggle()"
          [name]="item.prop"
          [(ngModel)]="_formData[item.prop]"
          autocomplete="off"
          dDatepicker
          appendToBody
          #datePicker1="datepicker"
          [dValidateRules]="item.required ? item.rule : []"
        />
        <div
          class="devui-input-group-addon close-icon-wrapper"
          (click)="datePicker1.clearAll()"
        >
          <i class="icon icon-close"></i>
        </div>
        <div class="devui-input-group-addon" (click)="datePicker1.toggle()">
          <i class="icon icon-calendar"></i>
        </div>
      </div>
    </d-form-control>
  </d-form-item>
  <d-form-operation class="da-form-operation">
    <d-button
      style="margin-right: 5px"
      dFormSubmit
      [dFormSubmitData]="'submit-button'"
      >Confirm</d-button
    >
    <d-button bsStyle="common" (click)="cancel()">Cancel</d-button>
  </d-form-operation>
</form>