0

我们如何使用 react-hook-form 和 ionic 在表单之外触发表单提交。我相信我们可以使用按钮上的表单属性来做到这一点，但离子按钮不允许 IonButton 上的表单属性

下面的代码最初在 chrome 中工作，突然停止工作，而且这段代码在 safari 浏览器上也不起作用。看起来 Ionic 会释放按钮上的 form 属性，但是直到我们在 Ionic 按钮上得到解决的 form 属性，我正在尝试找到一种适用于所有浏览器的解决方法

const DynTest: React.FC<FormProps> = (props) => {

  const formRef = useRef<HTMLFormElement>(null);    
  const { control, handleSubmit, errors, reset, formState } = useForm({
    defaultValues: {},
    mode: "onChange",
  });

  const { fields, append, remove  } = useFieldArray({
    control,
    name: "data"
  });

  const onReset = () => {
    reset({});
  };

  const onSubmit = (data: any) => {
    console.log(data);
  };

  const submitForm = (flag: boolean) => {
    console.log("inside submit form");
    //Check if requestSubmit() is available to current browser
    if (formRef!.current!.requestSubmit) {
      formRef!.current!.requestSubmit();
    }
    //If not, perform constraint validation and call submit function directly
    else {
      console.log("inside submit form else");
      if (formRef!.current!.reportValidity()) {
        handleSubmit(onSubmit);
      }
    }
  };

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonButtons slot="start">
            <IonBackButton />
          </IonButtons>
          <IonTitle>React Hook Form</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent className="ion-padding">
        <p>Details</p>
        <form onSubmit={handleSubmit(onSubmit)} ref={formRef}>
          <IonItem>
            <IonLabel>Gender</IonLabel>
            <Controller
              render={({ onChange, onBlur, value }) => (
                <IonSelect placeholder="Select One" onIonChange={onChange}>
                  <IonSelectOption value="FEMALE">Female</IonSelectOption>
                  <IonSelectOption value="MALE">Male</IonSelectOption>
                </IonSelect>
              )}
              control={control}
              name="gender"
              rules={{ required: "This is a required field" }}
            />
          </IonItem>
          <ErrorMessage
            errors={errors}
            name="gender"
            as={<div style={{ color: "red" }} />}
          />

          <IonItem>
            <IonLabel>Email</IonLabel>
            <Controller
              render={({ onChange, onBlur, value }) => (
                <IonInput onIonChange={onChange} />
              )}
              control={control}
              name="email"
              rules={{
                required: "This is a required field",
                pattern: {
                  value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
                  message: "invalid email address",
                },
              }}
            />
          </IonItem>
          <ErrorMessage
            errors={errors}
            name="email"
            as={<div style={{ color: "red" }} />}
          />
          <IonItem>
            <Controller
              render={({ onChange, onBlur, value }) => (
                <IonRange
                  min={-200}
                  max={200}
                  color="secondary"
                  onIonChange={onChange}
                >
                  <IonLabel slot="start">-200</IonLabel>
                  <IonLabel slot="end">200</IonLabel>
                </IonRange>
              )}
              control={control}
              name="rangeInfo"
              rules={{ required: "Please Select A Value" }}
            />
          </IonItem>
          <ErrorMessage
            errors={errors}
            name="rangeInfo"
            as={<div style={{ color: "red" }} />}
          />
        </form>
      </IonContent>
      <div>
        <IonButton onClick={onSubmit}>submit</IonButton>
      </div>
      <div>
        <IonButton onClick={onReset}>Reset</IonButton>
      </div>
    </IonPage>
  );
};

export default DynTest;
4

0 回答 0