32

I have a login form created by Form.create(), but I can't pass any props to this form from parent component, compiler always notify a error like 

error TS2339: Property 'loading' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Compone
nt<{}, ComponentState>> & Readonly<{ childr...'.

LoginForm.tsx

import * as React from 'react';
import { Form } from 'antd';
import { WrappedFormUtils } from 'antd/lib/form/Form';

interface Props {
    form: WrappedFormUtils;
    loading: boolean;
    username?: string;
}

class LoginForm extends React.Component<Props, {}> {
    render() {
        const { loading } = this.props;
        return (<div>form {loading ? 'true' : 'false'}</div>);
     }
}

export default Form.create()(LoginForm);

LoginPage.tsx

import LoginForm from './components/loginForm';

const loginPage: React.SFC<Props> = (props) => {
     return (
         <div>
              <LoginForm loading={true}/>
                         ^ error here!
         </div>
     );
 };

My antd version is 2.11.2

Finally I found a solution

class LoginForm extends React.Component<Props & {form:     WrappedFormUtils}, State> {
  render() {
    const { loading } = this.props;
    return (<div>form {loading ? 'true' : 'false'}</div>);
  }
}

export default Form.create<Props>()(LoginForm);
Kennir
  • 465
  • 1
  • 5
  • 9

2 Answers2

53

  1. Import the FormComponentProps

    import {FormComponentProps} from 'antd/lib/form/Form';

  2. Then have your component

    interface YourProps {
    test: string;
}        

class YourComponent extends React.Component<YourProps & FormComponentProps> {
    constructor(props: YourProps & FormComponentProps) {
        super(props);
        ...
    }
}

  3. Then export the class using Form.create()

    export default Form.create<YourProps>()(YourComponent);

    The generic argument on Form.create casts the result to a React ComponentClass with YourProps - without FormComponentProps, because these are being injected through the Form.create wrapper component.

AmazingTurtle
  • 1,046
  • 14
  • 27
  • valid, but I needed to mandatory add: constructor(props: YourProps & FormComponentProps) { super(props); } to actually pass a prop to a form. I suggest you to edit with this info. – D_Guidi May 03 '18 at 12:15
  • 5
    I extend props with `FormComponentProps` this way: ```interface YourProps extends FormComponentProps {...}``` and it works for me as well. – Sergei Basharov May 21 '18 at 10:03
  • @SergeiBasharov yeah in the new antd version they pick your props on Form.create<...> and strip FormComponentProps out – AmazingTurtle May 21 '18 at 16:23
14

I got a better approach from antd documentation

import { Form } from 'antd';
import { FormComponentProps } from 'antd/lib/form';

interface UserFormProps extends FormComponentProps {
  age: number;
  name: string;
}

class UserForm extends React.Component<UserFormProps, any> {
  // ...
}

const App = Form.create<UserFormProps>({
  // ...
})(UserForm);
Suben Saha
  • 1,507
  • 13
  • 16