FormBuilder
作者:王书硕
它由两部分组成: 一个是form,一个是UI组件
创建form
const formScheme = {
closeDate: {
type: FieldTypeEnum.Timestamp,
initState: {
label: '关闭日期',
required: true,
visible: false,
},
validators: [validators.required]
},
};
const createForm = (): EntityForm => {
const formBuilder = new FormBuilder();
Object.entries(this.formScheme).forEach(([key, value]) => {
formBuilder.appendField(key, makeField(value));
});
return formBuilder.toForm({
closeDate: this.getDefaultCloseDate(),
});
}
- formScheme定义字段
- createForm创建form,appendField创建字段,toForm方法,获取form,参数为初始值
UI组件
export function CloseForm(props) {
return (
<MSTFormLayout form={props.form} columnSize={1}>
<MSTFormElement path={'closeDate'} minDate={props.minCloseDate} />
<MSTFormElement
path="closedReason"
criteriaStr={`objectBizActions.objectBizAction.objectType = 'CalendarEntry' and objectBizActions.objectBizAction.action.id = 'close' and isDisabled = false`}
isMulti={false}
contextOrgIds={props.contextOrgIds}
/>
<MSTFormElement path="closedReasonValue" />
</MSTFormLayout>
);
}
- MSTFormLayout是容器,form就是上面创建的form
- MSTFormElement是字段,各个字段分别使用该组件渲染,根据字段的具体类型,传入相应的参数。
校验validate
const valid = await this.form.validate();
if (!valid) {
return;
}
- 在保存等场景,如果需要校验,就调这个方法,会在对应的行出现错误提示
坑
- 不要给MSTFormElement组件传
isRequire={true}
的参数。传了这个参数在手动删除输入框里的值的时候,不会修改form中的值。 - 如果字段是必填,除了
initState.required
,还必须要validators: [validators.required]
- 如果有必填属性,还要自己调validate方法。