Ant Design 中 form组件的技巧

1、给组件设置初始值

正常使用时：

<Input addonAfter={<Icon type="setting" />} defaultValue="mysite" />

form表单中：

<Form.Item label={<span className="formStyle">监控设备通道号</span>}>
           {getFieldDecorator('mondevChannelNo', {
                  initialValue: 1,
                  rules: [{required: true, message: '只能输入数字且小于10位数',max:10,pattern:"^[0-9]*$"}],
               })(
                 <Input placeholder="请输入监控设备通道号"/>,
               )}
</Form.Item>

2、清空form表单中的内容

const {form} = props;
form.resetFields();

3、form表单中的时间组件DatePicker

如果直接上传到后端是下图这种格式

需要先转换一下格式

const values = {
	prodDate: fieldsValue['prodDate']===undefined?"":fieldsValue['prodDate'].format('YYYY-MM-dd'),
};

如果需要一个默认的时间

正常使用时

moment.fromat("YYYY-MM-dd")

form表单中

initialValue: moment(moment(),"HH:mm")

4、表单验证

使用getFieldDecorator

required：是否必须
message：input框消息
max：最大字数
pattern：正则验证

const { getFieldDecorator } = props.form;

<Form.Item label={<span className="formStyle">监控设备通道号</span>}>
		{getFieldDecorator('mondevChannelNo', {
			rules: [{required: true, message: '只能输入数字且小于10位数',max:10,pattern:"^[0-9]*$"}],
		})(
		     <Input placeholder="请输入监控设备通道号"/>,
		)}
</Form.Item>

点击确定时触发的函数

const onCreateTerminal = () => {
	props.form.validateFields((err, fieldsValue) => {
			//判断是否所有的条件都满足，否则会return出去
            if (err) {
                return;
            }
            //处理时间
            const values = {
                ...fieldsValue,
                startTime: fieldsValue['startTime']===undefined?"":fieldsValue['startTime'].format('HH:mm'),
            };
    		//调用后端接口
            const {form} = props;
            if (addOrEdit === 1) {
                const params = {...values};
                AgencyMaintainService.distributionMonitorService.addMonitor(params).then((data)=>{
	                    if (data[0].status !== "0") {
	                        message.error(data[0].message);
	                    }else {
	                        message.success(data[0].message);
	                        handleModalVisible();
	                        form.resetFields();
	                    }
                });
          }
	});
}