Validator for password not working on react native

[harleenarora]

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.

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?

[bietkul]

Can you explain better what's the exact issue? As per your implementation, your error message will be visible after a blur event i.e when touched is true. Can you put some log in the validator function and check if it is getting called or not?

[bietkul]

Check this example https://codesandbox.io/s/p2rqmr8qk7 I think it should be validators instead of validator.

changePasswordForm = FormBuilder.group({
  new_password: ['', [Validators.required]],
  confirm_password: ['', [Validators.required]],
}, {
  validators: this.MatchPassword,
});

[bietkul]

Closing since no activity. Please feel free to reopen.