FormBuilder

FormBuilder

作者:王书硕


由两部分组成: 一个是form,一个是UI组件

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(),
    });
  }
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>
  );
}
const valid = await this.form.validate();
if (!valid) {
    return;
}

  1. 不要给MSTFormElement组件传isRequire={true}的参数。传了这个参数在手动删除输入框里的值的时候,不会修改form中的值。
  2. 如果字段是必填,除了initState.required,还必须要validators: [validators.required]
  3. 如果有必填属性,还要自己调validate方法。