Question - Hide error message when reset Login form

[natdouglas]

Please note this is a question and I'm new to stormpath. I have a custom login form using:

"formsy-react": "^0.19.2",
"formsy-semantic-ui-react": "^0.1.4",
"react": "^15.4.2",
"react-stormpath": "^1.3.5",
"semantic-ui-react": "^0.64.7"

With formsy-react I have a reset button that allows me to clear the login form. If the user enters erroneous data, I use data-spIf="form.error" to display a semantic-ui-react error element. Here is my code:

import { LoginForm as StormpathForm} from 'react-stormpath';
import { Header, Button, Message, Label, Divider } from 'semantic-ui-react';
import { Form } from 'formsy-react';
import { Input, Checkbox } from 'formsy-semantic-ui-react';

const styles = {
  header: {
    backgroundColor: '#ddd',
    padding: 18,
  },

  content: {
    padding: 50,
  },

  formElement: {
    marginBottom: 18,
    width: 300
  },

  checkbox: {
    marginBottom: 18,
  },

  submitButtonStyle: {
    backgroundColor: '#4183C4',
    marginBottom: 18,
    color: '#ffffff'
  },

  customErrorLabel: {
    color: '#f00',
    textAlign: 'center',
  },
};

const el = <Label color="red" pointing="left"/>;

const inputUsername = (
  <Input
    name='username'
    placeholder="Username"
    icon="user"
    iconPosition="left"
    required
    validationErrors={{
      isDefaultRequiredValue: 'Username is required.',
    }}
    errorLabel={ el }
    style={ styles.formElement }
  />
);

const inputPassword = (
  <Input
    name='password'
    placeholder="Password"
    type="password"
    icon="lock"
    iconPosition="left"
    required
    validationErrors={{
      isDefaultRequiredValue: 'Password is required.',
    }}
    errorLabel={ el }
    style={ styles.formElement }
  />
);

const checkboxTerms = (
  <Checkbox
    name="checkboxTerms"
    label="I agree to the Terms & Conditions"
    required
    validations="isTrue"
    validationErrors={{
      isTrue: 'You must accept the Terms & Conditions.',
      isDefaultRequiredValue: 'You must accept the Terms & Conditions.',
    }}
    errorLabel={ el }
    style={ styles.checkbox }
  />
);

export default class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state=({
      canSubmit: false,
      showErrorMessage: "hidden"
    })
  };

  submitForm = (e, next) => {
    console.log("Form submitted", e.data);
    next();
  };

  enableButton() {
    this.setState({ canSubmit: true });
  };

  disableButton() {
    this.setState({ canSubmit: false });
  };

  resetForm() {
    console.log("showErrorMessage=[" +this.state.showErrorMessage + "]");
    this.form.reset();
  };

render() {
    return (
        <div id="login">
          <Header as='h2'>Login</Header>
          <StormpathForm onSubmit={this.submitForm}>
            <Form noValidate ref={(ref) => this.form = ref } onValid={this.enableButton.bind(this)} onInvalid={this.disableButton.bind(this)}>
             { inputUsername }
             { inputPassword }
             { checkboxTerms }
             <Divider/>
             <Button type="submit" disabled={!this.state.canSubmit} content="Submit" style={ styles.submitButtonStyle } />
             <Button type="button" onClick={this.resetForm.bind(this)} content="Reset" color="grey" />
            </Form>
            <Message negative data-spIf="form.error">
              <Message.Header>Error</Message.Header>
              <span data-spBind="form.errorMessage" />
            </Message>
          </StormpathForm>
        </div>
    );
  }
} 

This is what my login form looks like.

This is how the error message appears:

My goal is when you hit the reset button, the error message goes away just as the form fields clear. With semantic-ui-react's message element you can toggle the "visible" and "hidden" classes to make the element appear:

<Message negative visible>
  <Message.Header>Error</Message.Header>
  <span data-spBind="form.errorMessage" />
</Message>

<Message negative hidden>
  <Message.Header>Error</Message.Header>
  <span data-spBind="form.errorMessage" />
</Message>

I tried to add the visible and hidden classes, but "data-spIf="form.error"" doesn't seem to reset itself. Any ideas? All help is appreciated.

[the-overengineer]

@natdouglas Doesn't look like you can currently do this, but the linked PR adds spResetErrors/data-spResetErrors, which you will be able to put on a button to reset the form state.