使用AntD
Form表单验证validator不生效
1. 注意是validator,而不是validate
2. validator总需要返回一个callback,有问题返回callback(错误提醒文字),验证没有问题也要执行callback(),
3. 一个FormItem 中,getFieldDecorator一个选项,例如:
<FormItem>
{ getFieldDecorator('wakeup_prompt', {
rules: [{
required: true,
message: 'This field is required'
}],
initialValue: 'defalut'
})(
<Select>
{
fileList.map(function(item) {
return <Option
key={ item.text }
value={ item.val }
>
{ item.text }
</Option>
}
)
}
</Select>
<a className="prompt_setting" style={{ marginLeft: '10px' }}
onClick={ this._showUploadModal }
>Click Me</a>
) }
</FormItem>
此时,getFieldDecorator中同时有Select 和 a 元素, require: true验证不生效,需要把a标签元素移除FormItem
NewDate 转换时间格式无效
使用new Date将字符串转成时间对象,对字符串的格式是有要求的。
YYYY-MM-DD HH:MM:SS格式是有问题的,这个格式在部分浏览器转不成时间对象,YYYY/MM/DD HH:MM:SS格式才行,只需要对字符串调用replace(/-/g, '/')就行
Form表单Select中设置initialValue 无效(AntD 2.9.1)
1. initialValue值属性为字符串,与Option中的value 值对应
2. 同个FormItem 中不能包含多个getFieldDecorator,但是可以里面可以包含多个FormItem
3. Select 外面不要多加元素,否则有异常
<FormItem
{ ...formItemLayout }
label={(
<Tooltip title={ <FormattedHTMLMessage id="LANG2230" /> }>
<span>{ formatMessage({id: "LANG2230"}) }</span>
</Tooltip>
)}
>
<FormItem
style={{ display: 'inline-block', width: 'calc(50%)' }}
>
{ getFieldDecorator('end_time', {
getValueFromEvent: (e) => {
return UCMGUI.toggleErrorMessage(e)
},
rules: [{
required: true,
message: formatMessage({id: "LANG2150"})
}],
initialValue: '0'
})(
<Select>
<Option value='0'>0</Option>
<Option value='1'>1</Option>
</Select>
) }
</FormItem>
<FormItem
style={{ display: 'inline-block', width: 'calc(50%)' }}
>
{ getFieldDecorator('day_min', {
initialValue: '15'
})(
<div>
<Select style={{ width: 128, marginRight: 10 }}>
<Option value="0">0</Option>
<Option value="15">15</Option>
</Select>
分钟
</div>
)}
</FormItem>
</FormItem>
其中因为Select 外面加了div 导致initialValue 设置无效
<FormItem
style={{ display: 'inline-block', width: 'calc(50%)' }}
>
{ getFieldDecorator('day_min', {
initialValue: '15'
})(
<!--<div>-->
<Select style={{ width: 128, marginRight: 10 }}>
<Option value="0">0</Option>
<Option value="15">15</Option>
</Select>
<!--</div>-->
)}
</FormItem>