iniz-form.tsx

function Demo() {
  const loginForm = useForm({
    email: ['', [Validators.required]],
    username: ['', [Validators.required, AsyncUsernameUniquenessValidator]],
    password: ['', [PasswordStringValidator]],
    contacts: [[], [Validators.minLength(1)],
  );
  const onLogin = useCallback((values) => {
    console.log("=== form values", values);
  })

  return (
    <form onSubmit={loginForm.handleSubmit(onLogin)}>
      <Field field={loginForm.controls.email}>
        {({ handlers, touched, errors }) => (
          <div className="form-group">
            <input {...handlers('text')} />
            <span>
              {touched && errors.required && 'Email is required'}
            </span>
          </div>
        )}
      </Field>
      <Field field={loginForm.controls.username}>
        {({ handlers, pending, touched, errors }) => (
          <div className="form-group">
            <input {...handlers('text')} />
            {pending && <Loading />}
            <span>
              {touched && errors.required && 'Email is required'}
            </span>
          </div>
        )}
      </Field>
      <button 
        disabled={
          !loginForm.touched
          || loginForm.pending 
          || loginForm.invalid 
          || loginForm.submitting
        }
        type="submit"
      >Register</button>
    </form>
  )
}