ant-design 动态表单实时错误验证 小计

image.png

这是ant-design上的一个demo，在所有表单不满足条件时提交按钮禁用。
当表单需要动态增减时如何实时禁用按钮？

//表单每一项的错误值
function formHasErrors(fieldsError) {
    return Object.keys(fieldsError).some(field => fieldsError[field]);
}
class TestForm extends Component {
    constructor(props) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    componentDidMount() {
        // 组件载入时调用表单验证方法验证表单，将按钮置灰
        this.props.form.validateFields();
    }
    render() {
        const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched, getFieldValue, validateFields} = this.props.form;
        const typeError = isFieldTouched('type') && getFieldError('type');
        const nameError = isFieldTouched('name') && getFieldError('name');
       //根据type的值判断姓名表单的显示与否，组件第一次渲染时这个值为空，需要给个初始值
        const curType = getFieldValue('type') || '1';
        console.log(curType);
        console.log('render');
        return (
            

                
                    {getFieldDecorator('type', {
                        rules: [{
                            message: '请选择'
                        }],
                        initialValue: '1'
                    })(
                         {
                            /*
                            在这个值发生变化时手动触发验证，注意：
                            1. 在下一个循环触发验证，需要等表单的增减
                                这一次渲染完成后的下一次再来触发验证，
                                顺序是先渲染表单，再触发验证。  
                            2. validateFields的第一个参数可以传一组数组，
                                代表触发具体表单的验证，如果是onChange后，
                                需要验证的表单还在就可以传值只验证它，如果已经
                                消失，则不需要传参，直接验证全部。
                            */
                            setTimeout(() => {
                                validateFields({ force: true }, function(err) {
                                    console.log('test', err);
                                });
                            }, 0);
                        }}>
                            需要姓名
                            不需要
                        
                    )}
                
                {curType === '1' ? 
                    {getFieldDecorator('name', {
                        rules: [{
                            required: curType === '1',
                            message: '必须的'
                        }]
                    })(
                        
                    )}
                 : null}
                
                    确认
                
            
        );
    }
    handleSubmit(e) {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                console.log(values);
            }
        });
    }
}

TestForm.propTypes = {
    form: PropTypes.object.isRequired,
};

export default Form.create()(TestForm);

API参考