Validation for Rate component ant.design

Question

I'm trying to validate Rate component, set initial value, etc.

  {getFieldDecorator('rating', {
    initialValue: dataSource.getIn(['data', 'rating'], ''),
    rules: [{ required: true, message: 'Field is required' }],
  })(<Rate allowClear={false} onChange={this.setRating} />)}

Having code like this in my form result in an error after each value change

Warning: getFieldDecorator will override value, so please don't set value directly and use setFieldsValue to set it.

Any ideas how to overcome it? Code works as expected

Answer 1

To validate <Rate /> in antd design you should use null as initial value.

<Form.Item>
    {getFieldDecorator('rating', {
        initialValue: review.rating ? review.rating:null,
        rules: [
            {   
                required: true,
                message:'Rating Required',
            },
        ],
    })(
        <Rate />,
    )}
</Form.Item>

Answer 2

I think the reason is because you should not use onChange when your component is being controlled by the Form

if you would want to get the actual rate using: this.props.form.validateFields() since will be also do the field validation