Validator for password not working on react native - react-native

Question

I am working on latest react-native version.
I'm trying to implement a custom validator to check if the password and password confirm are equal. The problem is that the validator function is not working.
Library Link react-reactive-form
Code
MatchPassword(AC: AbstractControl) {
let password = AC.get('new_password').value; // to get value in input tag
let confirmPassword = AC.get('confirm_password').value; // to get value in input tag
if (password !== confirmPassword) {
AC.get('confirm_password').setErrors({ mismatch: true });
} else {
return null;
}
}
changePasswordForm = FormBuilder.group({
new_password: ['', [Validators.required]],
confirm_password: ['', [Validators.required]],
}, {
validator: this.MatchPassword,
});
render() {
return (
<Fragment>
<FieldGroup
control={this.changePasswordForm}
render={() => {
return (
<Fragment>
<FieldControl
name="new_password"
render={({ handler, touched, hasError, ...props }) => (
<Fragment>
<TextInput {...props} label="New Password" placeholder="Password" handler={handler} type="password" secureTextEntry />
{(touched && hasError('required')) && <ErrorText message="This Field Should Not Be Empty." />}
</Fragment>
)}
/>
<FieldControl
name="confirm_password"
render={({ handler, touched, hasError, ...props }) => (
<Fragment>
<TextInput {...props} label="Confirm Password" placeholder="Confirm Password" handler={handler} type="password" secureTextEntry />
{(touched && hasError('required')) && <ErrorText message="This Field Should Not Be Empty." />}
{(touched && hasError('mismatch')) && <ErrorText message="Password No Match!" />}
</Fragment>
)}
/>
<Button onPress={() => this.handleSubmit()} variant="success" block large style={[mb0, mr15, flex1]}>Submit</Button>
</Fragment>
);
}}
/>
</Fragment>
);
}
Please tell me how to do this?

Answer 1

Actually, you have used the react JS packages to validate the form. React JS packages can't be used for react-native projects. You should check this here
Abstract of your problem:
react library actually does not have anything related to Browser DOM HTML. Anything related to it separated into react-dom package. React Native does not and cannot use this library, because you don't have DOM underneath a react native application. However you can use most of the code/functionality you wrote for your mobile app in the browser
You can validate your form using these packages:
https://www.npmjs.com/package/react-native-form-validator
https://www.npmjs.com/package/react-native-validator-form
https://github.com/jeffraux/react-native-validate-form