如何在 TS React 中使用 Joi 验证两个密码字段？

Question

I am building a reusable form component with TypeScript, let's call it AbstractForm for now. It is designed to be inherited by other components like LoginForm , RegisterForm and so on, let's say I am working on some DerivedForm component. To validate the fields I am using Joi . The derived component only has to supply the domain model (Joi validation schema) and the submit method.
Everything works great and validates perfectly, except when I want to use two password fields, and the second password is checked to match the first one via Joi.string().valid(this.state.data.password) . It never passes the validation even when both passwords are identical, Joi still throws an error saying that they are not. And I can't even think of a reason why. Can someone suggest what is the cause of this behaviour?
I am not using Joi.ref('password') instead because fields are validated in isolation with every onChange event (method validateProperty() in AbstractForm does it).

This is the Schema interface defined in the AbstractForm module:

export interface Schema {
  [key: string]: Joi.Schema;
}

This is my schema in the DerivedForm :

schema: Schema = {
name: Joi.string()
  .required()
  .min(1)
  .label('Name'),
email: Joi.string()
  .required()
  .email()
  .min(5)
  .label('Email'),
password: Joi.string()
  .required()
  .min(8)
  .label('Password')
  .error(
    errors => 'Passwords should match and have at least 8 characters.'
  ),
repeatPassword: Joi.string()
  .valid(this.state.data.password)
  .required()
  .label('Password')
  .error(
    errors => 'Passwords should match and have at least 8 characters.'
  ),
};

And this is how these fields are validated inside the AbstractForm :

validateProperty = (name: string, value: string) => {
  const property = { [name]: value };
  const propSchema: Schema = { [name]: this.schema[name] };
  const { error } = Joi.validate(property, propSchema);
  return error ? error.details[0].message : null;
};

handleChange = (e: ChangeEvent<HTMLInputElement>) => {
  const { name, value } = e.currentTarget;

  const data = { ...this.state.data };
  data[name] = value;

  const errors = { ...this.state.errors };
  const errorMessage = this.validateProperty(name, value);
  if (errorMessage) errors[name] = errorMessage;
  else delete errors[name];

  this.setState({ data, errors });
};

I am also aware that this.setState() as well as the new useState() calls are asynchronous, but we are talking about validating against a different field here, so it should not be a problem.
I can add all the code for both modules if needed. Thanks in advance!

Answer 1

It turns out that the valid reference to the first password field is generated only when the component is mounted. To update the reference, you can add this piece of code:

  componentDidUpdate() {
    this.schema.repeatPassword = Joi.string()
      .min(8)
      .valid(this.state.data.password)
      .required()
      .label('Password')
      .error(
        errors => 'Passwords should match and have at least 8 characters.'
      );
  }

...so it could remember the new "valid" value. I think that this is happening because I am using class component, not functional component. And with functional component the schema would update every render by itself.