Question: How Create Password Confirm with formz

[guissalustiano]

I'm create a register page and there need has a confirm password field. How is the better aprouch to do this with formz, because validation depends with external value and I don't now the better pattern to use.

I has two inputs

import 'package:formz/formz.dart';
import 'package:validators/validators.dart';

enum PasswordFieldValidationError { empty, small }

class PasswordField extends FormzInput<String, PasswordFieldValidationError> {
  const PasswordField.pure() : super.pure('');
  const PasswordField.dirty([String value = '']) : super.dirty(value);

  @override
  PasswordFieldValidationError validator(String value) {
    if (value.isEmpty) return PasswordFieldValidationError.empty;
    if (!isLength(value, 6)) return PasswordFieldValidationError.small;
    return null;
  }
}

import 'package:formz/formz.dart';

enum PasswordFieldValidationError { empty, match}

class PasswordField extends FormzInput<String, PasswordFieldValidationError> {
  const PasswordField.pure() : super.pure('');
  const PasswordField.dirty([String value = '']) : super.dirty(value);

  @override
  PasswordFieldValidationError validator(String value) {
    final otherPassword = 'How I get this?' // I don't how do this
    if (value.isEmpty) return PasswordFieldValidationError.empty;
    if (value != otherPassword) return PasswordFieldValidationError.match;
    return null;
  }
}

This package did extrymily userfull to help-me separete the logic and view, so I would like understend the better pattern before work around

really thanks!

[felangel]

Hi @guissalustiano 👋
Thanks for opening an issue and for the positive feedback!

You should probably have two Password inputs one for the original password (Password) and one for the confirmed password (ConfirmedPassword).

Then in the ConfirmedPassword input you can inject the original password via the dirty constructor like so:

class ConfirmedPassword extends FormzInput<String, PasswordFieldValidationError> {
  const ConfirmedPassword.pure() : original = const Password.pure(), super.pure('');
  const ConfirmedPassword.dirty({@required this.original, String value = ''}) : super.dirty(value);

  final Password original;

  @override
  PasswordFieldValidationError validator(String value) {
    // you now have access to the original password here via `original`
  }
}

Hope that helps 👍

[herman-the-worm]

I am curious to how this would work out if there are 2 inputs that have to be validated against each other.

This method won't work anymore since 2 objects cannot co-create each other.

@felangel what would be a direction in this case?

The example of would be 2 time entries that need to be verified against each other.

Like start time and end time.

If I add the code example from above the the end_time field then it is only verified against start_time. But start_time is not verified against the initial field and I am struggling to find an elegant solution to solve this.

[GsProjects]

Hi @felangel,

I'm a little confused when you say you "inject" the original password in the confirmed password class without having to provide it as a parameter in a function etc. Where is the password variable being passed to the confirmPassword class or how is it actually obtaining the original password value.

Basically I'm just wondering if you could elaborate on the "inject" part and how the confirmedPassword class actually gains access to the original password value. Thanks

Edit: Maybe you could provide a detailed textual representation of exactly whats happing in the .pure() and .dirty() lines. This would be hugely beneficial I think

[felangel]

Hi @felangel,

I'm a little confused when you say you "inject" the original password in the confirmed password class without having to provide it as a parameter in a function etc. Where is the password variable being passed to the confirmPassword class or how is it actually obtaining the original password value.

Basically I'm just wondering if you could elaborate on the "inject" part and how the confirmedPassword class actually gains access to the original password value. Thanks

Edit: Maybe you could provide a detailed textual representation of exactly whats happing in the .pure() and .dirty() lines. This would be hugely beneficial I think

It's just injected via constructor when the FormzInput is instantiated. You can take a look at the bloc firebase login example to see it in action.

Hope that helps 👍