表单form组件特性

Form 表单组件

 修改时间： 2019-02-19
 当前版本： 1.1.55

分类： NC高级组件

表单样式

简单示例

/**
 * 使用说明：
 *
 * 1.引入createPage
 * 2.包装业务页面
 * 3.代码中使用表单各种 API
 *   this.props.form.createForm
 *   this.props.form.setAllFormValue
 *   this.props.form.getAllFormValue
 *   this.props.form.setFormStatus
 *   ......
 */

// 1.引入createPage
import { createPage } from 'nc-lightapp-front'; // 'nc-lightapp-front/src'; 可以引入到源码，用于调试

// 示例 表单组件页面
class FormDemo extends Component {
    constructor(props) {
        super(props);
    }

    // 界面渲染
    render() {
        // 获取创建表单API
        let { createForm } = this.props.form;
        return (
            <div className="form-wrapper">
                // 根据模板信息创建form
                {createForm('formid'), {
                    // 编辑前事件
                    onBeforeEvent: beforeEventFn.bind(this)
                    //编辑后事件
                    onAfterEvent: afterEventFn.bind(this), 
                    // 取消 switch_browse 组件气泡提示
                    cancelPSwitch: true
                }}
            </div>
        );
    }
}

// 2.包装 FormDemo页面

export default createPage({
    initTemplate: initTemPlateFn,   // initTemPlateFn为初始化模板的方法
})(FormDemo);

表单方法API (this.props.form下面的方法)

createForm的config参数说明

4 模板结构

表单数据和使用时分离的, 也就是在createForm的时候不需要传递数据, 表单会根据createForm时出入的id从meta上找到对应数据。

4.1 Form

4.2 FormItem

5. 注意事项

5.1 表单有哪些状态？

表单组件区分为3种状态，分别为add, edit, browse 这三种状态。

• add 为新增态，会带出模板上默认值，可编辑的状态。
• edit 为编辑态， 不会带出默认值，渲染表单上存储的值，可编辑的状态。

• browse 为浏览态， 不会带出默认值， 渲染表单上存储的值， 不可编辑的状态。

  5.2 如何设置新增态(add) ？

  有两个方式设置新增态

• 在createForm(moduleId)之后，设置模板数组(setMeta(meta))之前，调用设置表单状态的API(setFormStatus(moudleid, status))设置表单为add状态。(不能在表单渲染完之后设置为add状态，这样会带不出默认值)

• 直接在模板中status配置 add 的状态。

  5.3 设置为新增态，但是未带出默认值 ？

  如已通过上面两种方式设置了新增态，但是依然未带出默认值，可能是以下几种情况导致

• 手动调用表单设置值的API (setAllFormValue 和 setFormItemsValue), 调用这两个API会覆盖默认值。

• 表单已渲染完成，再调用设置状态Api。表单初次渲染会把没有默认值项value置为null, 再次表单状态设置为add状态，不会覆盖之前初始化的值。

  5.4 如何替换自己组件

  如果现在表单组件满足不了当前的业务需求时, 可以自行替换表单组件。 javascript /**
  • @description: renderItem 方法放在page的this上
  • @param {type} 组件类型
  • @param {type} 组件ID
  • @param {type} 字段ID
  • @param {type} 需要渲染的jsx
  • @return: */
    props.renderItem( ‘form’, ‘head’, ‘attrcode’,

);

6. 组件更新日志

• v1.0 meta版本
• v2.0 From 组件开发中…