angular + ng-zorro中form的日期时间控件

Question

form中只有date和time的控件类型，没有日期时间(datetime)的控件类型:
.
.
.
this.register('number', NumberWidget); // 数值
this.register('date', DateWidget); // 日期
this.register('time', TimeWidget); // 时间
this.register('custom', CustomWidget); // 自定义

目前的使用写法：
this.register({name: '数字控件', type: 'number', options: [
{title: '控件配置', config: {...formConfig, schema: controlBaseOption}},
{title: '验证规则', config: {...formConfig, schema: controlBaseOption}},
]
});
.
.
.

想要其他控件类型，是否需要使用自定义，如何使用这个自定义的写法呢

Answer 1

// html  方法可忽略
<ng-template #finishTimeExpected let-data="data">
  <nz-date-picker
    nzShowTime
    [(ngModel)]="finishTimeExpectedTime"
    nzPlaceHolder=""
    (ngModelChange)="finishTimeOnChange($event, 'finishTimeExpected')"
  ></nz-date-picker>
</ng-template>

// ts
@ViewChild('finishTimeExpected') finishTimeExpected: TemplateRef<HTMLDocument>;

/**
   * 初始化表单配置
   */
  initColumn(): void {
    this.column = [
      {
        label: '时间',
        key: 'finishTimeExpected',
        type: 'custom', // 类型 自定义
        template: this.finishTimeExpected, // 自定义的模板
        rule: [{required: true}], // 规则
      }];
}
把写好的完整的表单配置传值给form：
/**
   * 初始化表单配置
   */
  private initForm(): void {
    this.formGroup = new FormGroup({});
// column 完整表单配置
// language 语言包可忽略
    this.formOperate = new FormOperate(this.formGroup, this.column, this.language);
    this.column.forEach((item: FormItem) => {
      const value = item.initialValue || null; // 初始值可忽略
      const formControl = new FormControl({value: value, disabled: this.isDisabled || item.disabled},// 自定义规则可忽略
        this.formOperate.addRule(item.rule, item.customRules),// 自定义规则可忽略
        this.formOperate.addAsyncRule(item.asyncRules));// 自定义规则可忽略
      this.formGroup.addControl(item.key, formControl);// 自定义组件
    });
    this.formInstance.emit({instance: this.formOperate}); // 回传给页面渲染可忽略
  }