Clean input without show valid error message

[gleidsonh]

After form is submitted, valid errors appears because I've cleaned value props.

handlePasswordSubmit = (event, errors) => {
    if (errors.length === 0) {
      const { onPasswordSubmit, handleOnShowing } = this.props;
      const { oldPassword, newPassword } = this.state;

      if (onPasswordSubmit) {
        onPasswordSubmit(oldPassword, newPassword, handleOnShowing)
          .then(() => {
            this.setState({
              oldPassword: '', newPassword: '', repeatedPassword: ''
            })
          })
      }
    }
  };

This is my form

<AvForm
    className="av-tooltip tooltip-label-right"
    onSubmit={this.handlePasswordSubmit}
    ref={(ref) => {
        if (!this.state.form) this.setState({ form: ref });
    }}
    >
    <Row>
        <Colxx xs="4">
        <AvGroup>
            <Label>
            <IntlMessages id="Current password" />
            </Label>
            <AvField
            type="password"
            name="oldPassword"
            value={oldPassword}
            id="password"
            className="form-control"
            placeholder={messages['Current password']}
            validate={{
                required: {
                value: true,
                errorMessage: messages['Enter your current password']
                },
                minLength: {
                value: 6,
                errorMessage: messages['6 characters minimum']
                }
            }}
            onChange={this.handlePasswordChange}
            />
        </AvGroup>
        </Colxx>

        <Colxx xs="4">
        <AvGroup>
            <Label>
            <IntlMessages id="New password" />
            </Label>
            <AvField
            type="password"
            name="newPassword"
            value={newPassword}
            id="newpassword"
            className="form-control"
            placeholder={messages['New password']}
            validate={{
                required: {
                value: true,
                errorMessage: messages['Enter a new password']
                },
                minLength: {
                value: 6,
                errorMessage: messages['6 characters minimum']
                }
            }}
            onChange={this.handlePasswordChange}
            />
        </AvGroup>
        </Colxx>

        <Colxx xs="4">
        <AvGroup>
            <Label>
            <IntlMessages id="Confirm password" />
            </Label>
            <AvField
            type="password"
            name="repeatedPassword"
            value={repeatedPassword}
            id="repeatnewpassword"
            className="form-control"
            placeholder={messages['Confirm password']}
            validate={{
                match: {
                value: 'newPassword',
                errorMessage: messages["Password doesn't match"]
                },
                required: {
                value: true,
                errorMessage: messages['Enter your new password']
                }
            }}
            onChange={this.handlePasswordChange}
            />
        </AvGroup>
        </Colxx>
    </Row>

    <Row>
        <Colxx
        xxl="12"
        lg="12"
        className="d-flex justify-content-between"
        >
        <div />

        {this.state.form && (
            <StateButton formRef={this.state.form} color="primary">
            <IntlMessages id="UPDATE" />
            </StateButton>
        )}
        </Colxx>
    </Row>
</AvForm>

Only for you understand what kind of error I'm saying, it's just valid errors message: https://prnt.sc/rrj91r

How can I clean this inputs correctly?

[TheSharpieOne]

You can call .reset() on your form ref. OR you can add a key to your form and just change the value of the key when you want to reset the form.

[gleidsonh]

It works like a charm. Thank you so much @TheSharpieOne