tcomb-form-native 动态设置错误答案

【问题标题】：tcomb-form-native set error dynamicallytcomb-form-native 动态设置错误
【发布时间】：2017-09-20 15:24:57
【问题描述】：

假设我有包含以下字段的登录表单：

const Email = t.refinement(t.String, (str) => {
  const reg = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;
  return reg.test(str);
});

const Password = t.refinement(t.String, (str) => {
  return str.length >= 6; // minimum password length should be 6 symbols
});

const Person = t.struct({
  email: Email,
  password: Password,
});

数据用户输入字段验证，然后我向身份验证服务器发送请求，服务器另外验证接收到的数据，结果证明没有用户具有此类凭据。所以它会根据响应返回：

{
  success: false,
  data: { password: ['User with such credentials is not found.'] }
}

问题是，如何将动态错误设置为 tcomb 属性？就像是： this.refs.form.getComponent('password').refs.input.addError(someError);
有可能吗？

【问题讨论】：

标签： react-native tcomb-form-native

【解决方案1】：

如果有人仍在寻找答案，将"error message" field option 绑定到周围组件的内部状态应该可以工作。例如：



  render() {

    // ... rest of code omitted 

    let formOptions = {
      fields: {
        email: {
          hasError: this.state.emailHasError,
          error: this.state.emailErrorMessage
        }
      }
    };

    return (<Tcomb.form.Form
      ref="myForm"
      options={formOptions}
    />);
  }

然后在接收到服务器响应时，您可以更新主组件状态，例如：


    this.setState({
          emailHasError: true,
          emailErrorMessage: 'Invalid email address'
        });

【讨论】：