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 (
            <Form onSubmit={this.handleSubmit}>
                <FormItem
                    validateStatus={typeError ? 'error' : ''}
                    help={typeError || ''}
                    {...typeError}
                    label="类型"
                >
                    {getFieldDecorator('type', {
                        rules: [{
                            message: '请选择'
                        }],
                        initialValue: '1'
                    })(
                        <Select onChange={() => {
                            /*
                            在这个值发生变化时手动触发验证，注意：
                            1. 在下一个循环触发验证，需要等表单的增减
                                这一次渲染完成后的下一次再来触发验证，
                                顺序是先渲染表单，再触发验证。  
                            2. validateFields的第一个参数可以传一组数组，
                                代表触发具体表单的验证，如果是onChange后，
                                需要验证的表单还在就可以传值只验证它，如果已经
                                消失，则不需要传参，直接验证全部。
                            */
                            setTimeout(() => {
                                validateFields({ force: true }, function(err) {
                                    console.log('test', err);
                                });
                            }, 0);
                        }}>
                            <Option value="1">需要姓名</Option>
                            <Option value="2">不需要</Option>
                        </Select>
                    )}
                </FormItem>
                {curType === '1' ? <FormItem
                    validateStatus={nameError ? 'error' : ''}
                    help={nameError || ''}
                    label="姓名"
                >
                    {getFieldDecorator('name', {
                        rules: [{
                            required: curType === '1',
                            message: '必须的'
                        }]
                    })(
                        <Input />
                    )}
                </FormItem> : null}
                <FormItem className="text-right">
                    <Button type="primary" htmlType="submit" className="m-r-sm" disabled={formHasErrors(getFieldsError())}>确认</Button>
                </FormItem>
            </Form>
        );
    }
    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参考