react redux form - Getting errors when clicked on confirm password and when click on checkbox

Question

Am using redux form to create a sign-up form everything is working except the area where i need to check if password and confirm password is match and also how to change checkbox to true from false and to disable the button if checkbox its not check. This is the code for the UI and validation

const required = (val) => val && val.length;
  const maxLength = (len) => (val) => !val || val.length <= len;
  const minLength = (len) => (val) => !val || val.length >= len;
  const isNumber = (val) => !isNaN(Number(val));
  const validEmail = (val) =>
    /^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}$/i.test(val);
  const matchInput = (input, allInputs, values) => {
    return input === values.password ? undefined : "Passwords do not match";
  };



 const passwordsMatch = ({ password, confirmPassword }) => {
    return password !== confirmPassword
  };



 const Checkbox = ({ input, touched, error }) => (
    <div style={{ border: touched && error ? "1px solid red" : "none" }}>
      <input type="checkbox" className="ml-auto" {...input} />
      <label className="ml-3"> <strong> Terms and conditions</strong></label>
    </div>
  );

This is the Ui phase for the form Please help me have spent days on this trying to make password and confirm password match and to create the handle submit

 <Form
      model="signup"
      //   validators={{
      //     "": { passwordsMatch },
      //   }}
      onSubmit={(values) => handleSubmit(values)}
    >

  <Row className="form-group">
    <Label htmlFor="firstname" md={2}>
      First Name
    </Label>
    <Col md={10}>
      <Control.text
        model=".firstname"
        id="firstname"
        name="firstname"
        className="form-control"
        placeholder=" First Name"
        validators={{
          required,
          minLength: minLength(3),
          maxLength: maxLength(15),
        }}
      />
      <Errors
        className="text-danger"
        model=".firstname"
        show="touched"
        messages={{
          required: "Required",
          minLength: "Must be greater than 2 characters",
          maxLength: "Must be 15 characters or less",
        }}
      />
    </Col>
  </Row>
  <Row className="form-group">
    <Label htmlFor="lastname" md={2}>
      Last Name
    </Label>
    <Col md={10}>
      <Control.text
        model=".lastname"
        id="lastname"
        name="lastname"
        className="form-control"
        placeholder="Last Name"
        validators={{
          required,
          minLength: minLength(3),
          maxLength: maxLength(30),
        }}
      />
      <Errors
        className="text-danger"
        model=".lastname"
        show="touched"
        messages={{
          required: "Required",
          minLength: "Must be greater than 2 characters",
          maxLength: "Must be 30 characters or less",
        }}
      />
    </Col>
  </Row>
  <Row className="form-group">
    <Label htmlFor="username" md={2}>
      Username
    </Label>
    <Col md={10}>
      <Control.text
        model=".username"
        id="username"
        name="username"
        className="form-control"
        placeholder="Username"
        validators={{
          required,
          minLength: minLength(3),
          maxLength: maxLength(15),
        }}
      />
      <Errors
        className="text-danger"
        model=".username"
        show="touched"
        messages={{
          required: "Required",
          minLength: "Username Must be greater than 2 characters",
          maxLength: "Username Must be 15 characters or less",
        }}
      />
    </Col>
  </Row>

  <Row className="form-group">
    <Label htmlFor="email" md={2}>
      Email
    </Label>
    <Col md={10}>
      <Control.text
        model=".email"
        id="email"
        name="email"
        className="form-control"
        placeholder=" Email"
        validators={{
          required,
          validEmail,
        }}
      />
      <Errors
        className="text-danger"
        model=".email"
        show="touched"
        messages={{
          required: "Required",
          validEmail: "Invalid email enters",
        }}
      />
    </Col>
  </Row>
  <Row className="form-group">
    <Label htmlFor="password" md={2}>
      Password
    </Label>
    <Col md={10}>
      <Control.text
        model=".password"
        id="password"
        name="password"
        className="form-control"
        placeholder=" Password"
        validators={{
          required,
          minLength: minLength(8),
          maxLength: maxLength(20),
        }}
      />
      <Errors
        className="text-danger"
        model=".password"
        show="touched"
        messages={{
          required: "Required",
          minLength: "Password Must be greater than 8 characters",
          maxLength: "Password Must be 20 characters or less",
        }}
      />
    </Col>
  </Row>
  <Row className="form-group">
    <Label htmlFor="confirmPassword" md={2}>
      Confirm password
    </Label>
    <Col md={10}>
      <Control.text
        model=".confirmPassword"
        id="confirmPassword"
        name="confirmPassword"
        className="form-control"
        placeholder=" Confirm password"
        validators={{required, }}
      />
      <Errors
        className="text-danger"
        model=".confirmPassword"
        
        show="touched"
        messages={{
          required: "Required",
          passwordsMatch: ""
        }}
      />
    </Col>
  </Row>
  <Row className="form-group">
    <Col md={{ size: 6, offset: 2 }}>
      <div className="form-check">
        <Label check>
          <Control.checkbox
            model=".agree"
            component={Checkbox}
            
            className="form-check-input"
            name="agree"
           
          />
          <Errors
            className="text-danger"
            model=".agree"
            show="touched"
            messages={{
              required: "Required",
             // Checkbox: "Please click on agree on terms and condition",
            }}
          />{" "}
          
        </Label>
      </div>
    </Col>
  </Row>
  <Row className="form-group">
    <Col md={{ size: 10, offset: 2 }}>
      <Button type="submit" color="primary" >
        Submit
      </Button>
    </Col>
  </Row>
</Form>

Answer 1

等待大神答复