Validate string equality with tcomb-form-native (confirm password)

Question

How would I validate my confirmPassword field with the tcomb-form-native library?

E-mail and password fields are quite trivial, I wouldn't know how to compare to the existing value of another field in the model though.

Here's my code.

const Email = t.refinement(t.String, (email) => {
  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(email);
});

const Password = t.refinement(t.String, (password) => {
  const reg = /^(?=\S+$).{8,}$/;
  return reg.test(password);
});

const RegistrationData = t.struct({
  email: Email,
  password: Password,
  confirmPassword: t.String // Need some equality check
});

I've investigated the docs https://github.com/gcanti/tcomb-form-native#disable-a-field-based-on-another-fields-value but I can't make sense of it.

Answer 1

Here is my solution:

First, define a type in class constructor this.samePassword that will be use for password checking.

this.samePassword = t.refinement(t.String, (s) => {
    return s == this.state.person.user_password;
});

Than, use this.samePassword type in the form definition

this.Person = t.struct({
    user_id:          t.String,
    user_password:    t.String,
    reenter_password: this.samePassword,
});

Next, prepare a onChange function to handle text changes and save to state. this.validate is a variable indicating whether the form had been entered or not.

onChange(person) {
    this.setState({ person });
    if(person.reenter_password != null && person.reenter_password != "") {
        this.validate = this.refs.form.getValue();
    }
}

Finally, hook this.state, this.onChange... on <Form>

<Form
    ref="form"
    type={this.Person}
    value={this.state.person}
    onChange={(v) => this.onChange(v)}
    options={this.options}
/> 

Full code are like this:

import React from "react";
import {View, TouchableOpacity, Text} from "react-native";
import * as t from "tcomb-form-native";

let Form = t.form.Form;

export default class CreateUser extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            person: {}
        };

        this.samePassword = t.refinement(t.String, (s) => {
            return s == this.state.person.user_password;
        })
        this.Person = t.struct({
            user_id:          t.String,
            user_password:    t.String,
            reenter_password: this.samePassword,
        });
        this.options = {
            fields: {
                user_password: {
                    password: true,
                    secureTextEntry: true,
                    error: "",
                },
                reenter_password: {
                    password: true,
                    secureTextEntry: true,
                    error: "different password",
                },
            }
        };
        this.validate = null;
    }
    onChange(person) {
        this.setState({ person });
        if(person.reenter_password != null && person.reenter_password != "") {
            this.validate = this.refs.form.getValue();
        }
    }


    render() {
        return (
            <View>
                <Form
                    ref="form"
                    type={this.Person}
                    value={this.state.person}
                    onChange={(v) => this.onChange(v)}
                    options={this.options}
                />
                <View>
                    <TouchableOpacity
                        style={{backgroundColor: this.validate ? "blue": "red"}}
                        activeOpacity={this.validate ? 0.5 : 1}
                        disabled={this.validate? false: true}
                        onPress={() => this.doNext()}>
                        <Text> NEXT MOVE </Text>
                    </TouchableOpacity>
                </View>
            </View>
        );
    }
}

Hope this helps!