Проверить равенство строк с помощью tcomb-form-native (подтвердить пароль)

Question

Как бы я подтвердил свой confirmPassword поле с библиотекой tcomb-form-native?

Поля электронной почты и пароля довольно тривиальны, хотя я не знаю, как сравнить их с существующим значением другого поля в модели.

Вот мой код

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
});

Я исследовал документы https://github.com/gcanti/tcomb-form-native, но не могу понять это.

Answer 1

Вот мое решение:

Сначала определите тип в конструкторе класса this.samePassword это будет использоваться для проверки пароля.

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

Чем использовать this.samePassword введите определение формы

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

Затем подготовьте onChange функция для обработки текстовых изменений и сохранения в состояние.this.validate переменная, указывающая, была ли введена форма или нет.

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

Наконец, крюк this.state, this.onChange... на <Form>

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

Полный код выглядит так:

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>
        );
    }
}

Надеюсь это поможет!