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#disable-a-field-based-on-another-fields-valueを調査しましたが、わかりません。

まず、パスワードチェックのために使用されるクラスのコンストラクタthis.samePasswordでタイプを定義します。ここでは

Answer 1

は私のソリューションです。

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

なく、テキストの変更を処理し、状態を保存するonChange機能を調製、フォーム定義

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

次にでthis.samePasswordタイプを使用します。 this.validateは、フォームが入力されたかどうかを示す変数です。

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

最後に、<Form>

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

全コードに... this.state、this.onChangeフックこのようなものです：

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

ホープ、このことができます！