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}},
]
});
.
.
.
想要其他控件类型,是否需要使用自定义,如何使用这个自定义的写法呢
// 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}); // 回传给页面渲染可忽略
}
自己写自定义控件